イベントをonclickイベントを動的に追加するボタンに設定しますか？

Question

DOMの動的に追加されたボタンにonclickイベントを割り当てる方法を尋ねますか？たとえば、次のよう

var btn = document.createElement("button"); 

でボタンを作成した後、私はそれをクリックしたときに、これが機能purchase(json[i].id)を呼び出しますように、このボタンのonclickを作成したいです。どのように私はそれに追加する必要がありますか？

Answer 1

var button = document.createElement('button') 

button.addEventListener('click', function(event) { 
... your code here ... 
}) 

someContainerElement.appendChild(button) 

メソッド名はかなり何が起こっているかを説明しますが、明示的であるために：イベントを追加

まず、buttonタグを作成して、button変数

var button = document.createElement('button') 

に割り当てリスナーをbutton要素に置き換えます。それはclickイベントをリッスンし、その関数を起動します。

button.addEventListener('click', function(event) { 
    ... your code here ... 
}) 

次に、あなたのbuttonsomeContainerElementにを追加します。つまり、buttonはこの親要素の内部に配置されます。

someContainerElement.appendChild(button) 

Answer 2

プログラムで追加されたボタンにリスナーを追加するには、リスナーをボタン自体ではなくボタンの親に追加する必要があります。

はのは、次のようにHTMLがあると仮定してみましょう：

<div id="buttons"> 

    <button class="btn"> 
    Existing button 
    </button> 

</div> 

私たちは、jQueryの.on方法with event delegationを使用することができます。

これはなし.onメソッドを使用している委任-、それは動作しません。

$('#buttons').on('click', '.btn', handleClick); 

ためには：これはと.onメソッドを使用している

$('.btn').on('click', handleClick); // don't use this, it won't work 

委任-このは作業を行いますこれを行うには、元のボタンと追加するボタンに共通の親要素がドキュメントごとに必要です（

）。

委任イベントには、後でドキュメントに追加される子孫エレメントのイベントを処理できるという利点があります。デリゲートされたイベントハンドラがアタッチされた時点で存在することが保証されている要素を選択することによって、デリゲートされたイベントを使用して、イベントハンドラを頻繁にアタッチしたり削除したりする必要がなくなります。私の例では

、新しいボタンが2秒のタイムアウト後に、プログラムで親要素#buttonsに追加され、#buttonsは、ページのロードにあったので、クリックハンドラは、まだ添付されます。

クリックハンドラをボタンにアタッチすると、まだ存在しないボタンにクリックハンドラをアタッチすることはできませんが、最初から存在するボタンの親にアタッチすると、 、そして、

<button class="btn" data-purchase="purchase_01"> 
    Existing button 
    </button> 

をJavaScriptであなたがアクセスすることができますあなたが購入IDが必要な場合は、このようなデータ属性にそれを保存することができます

var $buttons = $('#buttons'); 

var handleClick = function() { 
    alert('Button click works!'); 
}; 

// Works for new buttons (uses event delegation) 
$buttons.on('click', '.btn', handleClick); 


// Add a new button after 2 seconds 
setTimeout(function() { 
    var $newButton = $('<button />'); 

    $newButton 
    .addClass('btn') 
    .text('New button'); 

    $buttons.append($newButton); 
}, 2000); 

：ボタンは、それらが結合し、リスナーをクリックしています追加されますそれはハンドラーでこれが好きです：

var handleClick = function() { 
    var purchaseId = $(this).data('purchase'); 

    alert('Button click works! \n\n' + purchaseId); 
}; 

あなたはイベントの委任を切り替えることができます作業のデモはこちら：[編集]リンクを使用しhttp://codepen.io/tinacious/pen/MbQJWX?editors=1010