jQueryで生成されたボタンを処理する方法は？

-2

私はJavaScriptでボタンを作成しました、私はHTMLにこれらを追加しました。 jQueryでこれらを処理したい。 b_1とb_2をクリックして作業するにはどうすればよいですか？jQueryで生成されたボタンを処理する方法は？

$("#mainbutton").click(function(){ 
 
    document.getElementById("content").innerHTML = '<button id="b_1">Button1</button><button id="b_2">Button2</button>' 
 
}) 
 
$("#b_1").click(function(){ 
 
    alert("You've clicked button1!"); 
 
}) 
 

 
$("#b_2").click(function(){ 
 
    alert("You've clicked button2!"); 
 
})

<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<button id="mainbutton">Click me!</button> 
 
<div id="content"></div> 
 
</head>

出典

2017-08-18 jhsznrbt

の可能な重複（https://stackoverflow.com/questions/1359018/in-jquery-how-to- attach-events-to-dynamic-html要素） –

をあなたが身体にイベントを添付して、第二引数の要素を選択する必要があります:)

編集：私は」本文を使用しましたが、ページ上で静的な最も近い親を使用する方が良い方法です。 [ダイナミックHTML要素にイベントをアタッチする方法のjQueryで、？]

$("#mainbutton").click(function(){ 
 
    document.getElementById("content").innerHTML = '<button id="b_1">Button1</button><button id="b_2">Button2</button>' 
 
}) 
 
$("body").on('click','#b_1',function(){ 
 
    alert("You've clicked button1!"); 
 
}) 
 

 
$("body").on('click', '#b_2', function(){ 
 
    alert("You've clicked button2!"); 
 
})

<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<button id="mainbutton">Click me!</button> 
 
<div id="content"></div> 
 
</head>

出典

2017-08-18 12:00:07 erhankaradeniz

あなたは動的にボタンを追加することができますが、それらを追加するとき、あなたはイベントの委任を使用する必要があり、これらのボタンにイベントリスナーをアタッチされていないため。、#contentにこのような何かイベントリスナーをアタッチ：

$("#mainbutton").click(function(){ 
 
    document.getElementById("content").innerHTML = '<button id="b_1">Button1</button><button id="b_2">Button2</button>' 
 
}) 
 
$("#content").on('click', "#b_1", function(){ 
 
    alert("You've clicked button1!"); 
 
}) 
 

 
$("#content").on('click', "#b_2", function(){ 
 
    alert("You've clicked button2!"); 
 
})

<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<button id="mainbutton">Click me!</button> 
 
<div id="content"></div> 
 
</head>

出典

2017-08-18 11:59:12 Dij

答えて

関連する問題