Question

我有<div id="myContainer"></div>。我还有一个按钮：<input type="button" value="Send" id="sendButton"> 单击按钮时：它将DIV替换为另一个：

$( "#sendButton" ).click(function() {
$( "#myContainer" ).replaceWith("<div id='calc'><input type=\"text\" id=\"screen\" value=0><button id=\"add\">+</button><button id=\"mul\">*</button><button id=\"settings\">settings</button><button id=\"clear\">clear</button></div>");
});

我想在点击我刚刚放置的新按钮（<button id=\"mul\">*</button>）后激活另一个功能：

$( "#mul" ).click(function() {
console.log(' mul clicked!');
});

哪个不起作用，我正在等待刚刚创建的div的点击这个事实与它有关？

Answer 1

您需要将事件附加到#mul。因为它是动态附加的，$("#mul").click()将不起作用。

.on()将事件处理程序附加到当前选定的元素集。

尝试：

$("body").on("click","#mul",function(){
    console.log("mul clicked!");
});

More information here.

Answer 2

当您致电$( "#mul" ).click()时，您正在将事件处理程序附加到#mul，因为它存在于该点。要解决此问题，请在创建$( "#mul" ).click()后致电#mul 。

$( "#sendButton" ).click(function() { $( "#myContainer" ).replaceWith("<div id='calc'><input type=\"text\" id=\"screen\" value=0><button id=\"add\">+</button><button id=\"mul\">*</button><button id=\"settings\">settings</button><button id=\"clear\">clear</button></div>"); $( "#mul" ).click(function() { console.log( ' mul clicked!' ); }); });

您还可以根据文档使用jQuery的.on方法和可选的选择器，称为委托事件处理程序。如果这是你想要的，请查看jQuery的API：jQuery API documentation。基本用法类似于

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

Answer 3

使用此

$(document).on("click","#mul",function() {

而不是

$( "#mul" ).click(function() {

或

$( "#sendButton" ).click(function() { $( "#myContainer" ).replaceWith("<div id='calc'><input type=\"text\" id=\"screen\" value=0><button id=\"add\">+</button><button id=\"mul\">*</button><button id=\"settings\">settings</button><button id=\"clear\">clear</button></div>"); $( "#mul" ).click(function() { console.log(' mul clicked!'); }); });

Answer 4

$( "#sendButton" ).click(function() {
$( "#myContainer" ).replaceWith("<div id='calc'><input type=\"text\" id=\"screen\" value=0><button id=\"add\">+</button><button id=\"mul\">*</button><button id=\"settings\">settings</button><button id=\"clear\">clear</button></div>");

// add listener here
$( "#mul" ).click(function() {
console.log(' mul clicked!');
});

$( "#mul" ).trigger("click"); // add this to your code

});

http://api.jquery.com/trigger/查看trigger（）

的详细信息

http://jsfiddle.net/tnnj5/这是一个演示

必须在新内容插入dom后添加侦听器

Answer 5

您可以使用.live()方法将事件与动态添加的内容绑定。

试试这个：

 $("#mul").live("click", function() {
    console.log(' mul clicked!');
 });

Try in fiddle

你也可以使用jquery .on()，但是在这里添加动态内容。因此，您需要使用event delegation来注册事件处理程序，如：

$(document).on("click","body #mul", function() {
    console.log(' mul clicked!');
 });

Try in jsfiddle with on

jquery替换DIV数据，然后跟踪它的点击次数

5 个答案: