同じクラスの複数のボタンが機能しない

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') 
}) 

私のコードボタンは表示されますが、ソースコードを見るとボタンは表示されません。 テストするためにプレボタンを挿入すると機能します。あなたは、ボタンを作成している前

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

：

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

Answer 1

私はこの問題は、あなたがコードに

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

を実行しているときwordbtnボタンがまだ存在しませんので、クリックイベントは、あなたの内の任意の要素に割り当てられていないということだと思いますページ。

それが泡後にイベントが現在の文書要素によって処理されるため、今すぐクリックイベントも新たな付加ボタン、本を発射します

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

：

をして、ボタンのクリックイベントを交換してみてくださいそこ。

Answer 2

私はあなたがこのコードを実行していることを前提としています。

これらのボタンが存在しないため、イベントを追加できないため、これは機能しません。

「イベント委任」と呼ばれるものを使用して、効果を得ることができます。

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

Answer 3

すべてのイベントは、イベントリスナーが追加された後で生成された要素をリッスンしません。 を持つ例はJQueryと純粋JavaScriptの

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>

でピュアJavaスクリプト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>

の下を参照してください。