동일한 클래스의 여러 버튼이 작동하지 않습니다.

Question

단어 목록과 같은 클래스로 여러 개의 버튼을 만들었습니다.

var words = $(this).val().split(' '); 
    $.each(words, function(i, v) { 
     if ($.trim(v) !== '') { 
      html += "<button class='wordbtn'>"+ v +"</button>" + " " 
     } 
    }); 

$("p").html(html); 

단추는 내보기에 표시되지만 단추를 클릭하면 작동하지 않습니다.

$(".wordbtn").click(function(){ 
    console.log('clicked') 
}) 

코드 단추를 검사 할 때 소스 코드를 볼 때 단추가 표시되지 않습니다. 테스트 할 사전 버튼을 삽입하면 작동합니다.

<p><button class='wordbtn'>Test</button><p> 

Answer 1

내가 문제가 wordbtn 버튼 여전히

$(".wordbtn").click(function(){ 
    console.log('clicked') 
}) 

그래서 클릭 이벤트에서 모든 요소에 할당되지 않은 코드를 실행하면 존재하지 않는 것을 생각하여 페이지. 이벤트가 현재 문서 요소에 의해 처리되기 때문에

가

$(document).on("click", ".wordbtn", function(event){ 
    console.log('clicked'); 
}); 

이제 클릭 이벤트가 새로운 추가 버튼도 해고 것,이 그것을에 거품 후 :

는 귀하의 버튼 클릭 이벤트를 교체하려고 그곳에.

Answer 2

나는이 코드를 실행한다고 가정 : 당신이 버튼을 만드는

$(".wordbtn").click(function(){ 
    console.log('clicked') 
}) 

전에.

버튼이 없기 때문에 사용할 수 없으므로 이벤트를 추가 할 수 없습니다.

'이벤트 위임'이라는 것을 사용하면 원하는 효과를 얻을 수 있습니다.

https://learn.jquery.com/events/event-delegation/

Answer 3

모든 이벤트는 이벤트 수신기가 추가 된 후에 생성 된 요소를 수신하지 않습니다. JQuery와에게

docuemnt.event

document.getElementById("input").addEventListener("keyup", function() { 
 
    var words = this.value.replace(/\s+/g, " ").trim().split(" "); 
 
    var html = ""; 
 
    for (var i = 0; i < words.length; i++) { 
 
    html += "<button class='wordbtn'>" + words[i] + "</button>" + " "; 
 
    } 
 

 
    document.getElementById("p").innerHTML = html; 
 
}); 
 
// add click event to DOM 
 
window.onclick = function(e) { 
 
    //detect if mouse clicked on element has class "wordbtn" 
 
    if (e.target.className.indexOf("wordbtn") > -1) { 
 
    console.log('clicked') 
 
    } 
 

 
}

<input id='input' /> 
 
<p id='p'></p>

와 자바 스크립트 e.target 순수 시도 JQuery와 순수한 자바 스크립트 예제 아래 $(document).on(event,target,callbak);

var str = "some words from user inputs"; 
 

 
$("#input").keyup(function() { 
 
    var words = $.trim($(this).val().replace(/\s+/g, " ")).split(' '); 
 
    var html = ""; 
 
    $.each(words, function(i, v) { 
 
    html += "<button class='wordbtn'>" + v + "</button>" + " " 
 
    }); 
 

 
    $("p").html(html); 
 

 
}); 
 

 
$(document).on("click", ".wordbtn", function() { 
 
    console.log('clicked') 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id='input' /> 
 
<p></p>

참조