DOMで作成されたボタン要素を取得して関数を実行する方法

Question

javascriptを使用してボタン要素を作成しましたが、その要素を見つけたり選択してこの関数を呼び出す方法を知りたい場合は

function test() { 
     alert("it works!"); 
    } 

Answer 1

おそらくこのようになります。

$("body").append("<button>Button</button>"); 
 

 
$("button").click(function(){ 
 
    alert("it works!"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Answer 2

使用addEventListener：

var btn = document.createElement("BUTTON"); 
var t = document.createTextNode("ok"); 
btn.appendChild(t); 
document.body.appendChild(btn); 

btn.addEventListener('click', test); 

// My Test Function 
function test() { 
    alert("it works!"); 
} 

Answer 3

あなたがボタンにクリック機能を適用するには、次の操作を行うことができます。

$(btn).on('click', test); 

Answer 4

jQueryを使って別のオプション：あなたはそれを動的に作成した後、

var btn = document.createElement("BUTTON"); 
 
var t = document.createTextNode("ok"); 
 
btn.appendChild(t); 
 
document.body.appendChild(btn); 
 

 
$('body').on('click', 'BUTTON', function(event) { 
 
    alert("it works!"); 
 
});

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

Answer 5

あなたのボタンは、オブジェクトです。つまり、ドット構文を使用してプロパティと関数を簡単に割り当てることができます。たとえば、動的ボタンをクリック機能に付ける場合は、これを行うことができます：

btn.onclick = function() { 
    // add the JS function you want on the dynamic button here 
}; 

Answer 6

var btn = document.createElement("BUTTON"); 
btn.onclick = function() { test(); } 
var t = document.createTextNode("ok"); 
btn.appendChild(t); 
document.body.appendChild(btn); 

https://jsfiddle.net/k30nf9oo/

Answer 7

以下のスニペットを見てください。あなたはから `）（`テストを呼び出している

var bIsCreated = false; 
 
$(document).ready(function() { 
 
    $("#createNewButton").on("click", createNewButton); 
 
    $(document).on("click", ".newButton", function() { 
 
    alert("I am a new button"); 
 
    }); 
 
}); 
 

 
function createNewButton() { 
 
    if (!bIsCreated) { 
 
    var $newButton = $("<button/>").addClass("newButton") 
 
     .html("I am a new button"); 
 
    $newButton.appendTo(".container"); 
 
    } 
 
    alert("I am a old button"); 
 
}

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

 
<div class="container"> 
 
    <button id="createNewButton"> Create a new button</button> 
 
</div>