JavaScript에서 새로 추가 된 요소에 onclick 이벤트 추가

JavaScript에서 새로 추가 된 요소에 onclick 이벤트 추가

---

JavaScript로 추가 한 새 요소에 onclick 이벤트를 추가하려고했습니다.

문제는 document.body.innerHTML을 확인할 때 실제로 onclick = alert ( 'blah')가 새 요소에 추가 된 것을 볼 수 있다는 것입니다.

그러나 해당 요소를 클릭하면 경고 상자가 작동하지 않습니다. 사실 JavaScript와 관련된 모든 것이 작동하지 않습니다 ..

다음은 새 요소를 추가하는 데 사용하는 것입니다.

function add_img() { 
  var elemm = document.createElement('rvml:image'); 
  elemm.src = 'blah.png';
  elemm.className = 'rvml';
  elemm.onclick = "alert('blah')";
  document.body.appendChild(elemm);
  elemm.id = "gogo";
  elemm.style.position='absolute';
  elemm.style.width=55;
  elemm.style.height=55;
  elemm.style.top=200;
  elemm.style.left=300;
  elemm.style.rotation=200; 
}

이 함수를 호출하는 방법은 다음과 같습니다.

<button onclick=add_img()>add image</button>

이제 이미지가 브라우저 내부에서 완벽하게 그려집니다. 그러나 이미지를 클릭하면 경고가 표시되지 않습니다.

---

.onclick문자열 대신 함수로 설정해야합니다. 시험

elemm.onclick = function() { alert('blah'); };

대신.

---

확실하지 않지만 시도해보십시오.

elemm.addEventListener('click', function(){ alert('blah');}, false);

---

속성을 설정할 수도 있습니다.

elem.setAttribute("onclick","alert('blah');");

---

문자열로 이벤트를 할당 할 수 없습니다. 그것을 사용하십시오 :

elemm.onclick = function(){ alert('blah'); };

---

짧은 대답 : 핸들러를 함수로 설정하고 싶습니다.

elemm.onclick = function() { alert('blah'); };

약간 더 긴 대답 : 브라우저에서 일관되게 작동하려면 몇 줄의 코드를 더 작성해야합니다.

사실은 일반적인 브라우저 세트에서 특정 문제를 해결할 수있는 좀 더 긴 코드조차도 여전히 자체 문제를 동반합니다. 따라서 브라우저 간 지원에 관심이 없다면 완전히 짧은 지원을 사용하십시오. 당신이 그것에 관심이 있고 절대적 으로이 단 하나의 일만 작동시키고 싶다면 addEventListener및 조합을 사용하십시오 attachEvent. 객체를 광범위하게 생성하고 코드 전체에서 이벤트 리스너를 추가 및 제거하고 브라우저에서 작동하도록하려면 해당 책임을 jQuery와 같은 라이브러리에 위임해야합니다.

---

나는 당신이 그렇게 할 수 있다고 생각하지 않습니다. 다음을 사용해야합니다.

void addEventListener( 
  in DOMString type, 
  in EventListener listener, 
  in boolean useCapture 
); 

Documentation right here.

---

You have three different problems. First of all, values in HTML tags should be quoted! Not doing this can confuse the browser, and may cause some troubles (although it is likely not the case here). Second, you should actually assign a function to the onclick variable, as someone else meantioned. Not only is this the proper way to do it going forward, but it makes things much simpler if you are trying to use local variables in the onclick function. Finally, you can try either addEventListener or jQuery, jQuery has the advantage of a nicer interface.

Oh, and make sure your HTML validates! That could be an issue.

---

cant say why, but the es5/6 syntax doesnt work

elem.onclick = (ev) => {console.log(this);} not working

elem.onclick = function(ev) {console.log(this);} working

---

JQuery:

elemm.attr("onclick", "yourFunction(this)");

or:

elemm.attr("onclick", "alert('Hi!')");

---

In case you do not want to write all the code you have once written in the function you called. Please use the following code, using jQuery:

$(element).on('click', function () { add_img(); });

참고URL : https://stackoverflow.com/questions/3316207/add-onclick-event-to-newly-added-element-in-javascript