jquery替换DIV数据，然后跟踪点击它答案

【问题标题】：jquery Replace DIV data and then track clicks on itjquery替换DIV数据，然后跟踪点击它
【发布时间】：2013-11-30 07:51:22
【问题描述】：

我有一个 <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 的事实与它有关吗？

【问题讨论】：

你在 SO 上的网名真棒！ @fgf...

标签： javascript jquery html events

【解决方案1】：

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

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

试试：

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

More information here.

【讨论】：

【解决方案2】：

当您调用$( "#mul" ).click() 时，您会将一个事件处理程序附加到#mul，因为它当时存在。要解决此问题，只需在创建#mul 之后调用$( "#mul" ).click()。

$( "#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!' );
});

【讨论】：

谢谢，非常有用的解释，非常感谢

【解决方案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!');
        });
    });

【讨论】：

【解决方案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 后添加监听器

【讨论】：

这不是 OP 要求如何做的。这相当于单击按钮，他想知道为什么他的单击事件处理程序没有处理他在文档加载后动态创建的元素。您可以通过将 .click 调用替换为 @Hiral 的答案来完成此操作
@TomHeard 是的。我没有仔细阅读这个问题..但似乎我偶然解决了这个问题:)
我确实注意到，当我在评论时，这就是为什么我尽量不说你的答案是错误的，它只是有错误的意图。 =P

【解决方案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

【讨论】：