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

jquery Replace DIV data and then track clicks on it

本文关键字：跟踪 然后 替换 DIV 数据 jquery      更新时间：2023-12-14

我有一个<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的点击，这与它有关吗？

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

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

尝试：

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

点击此处了解更多信息。

当您调用$( "#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文档。基本用法类似

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

使用此

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

$( "#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/参见触发器（）的详细信息

http://jsfiddle.net/tnnj5/这是的演示

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

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

试试这个：

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

试用

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

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

在上试用jsfiddle

相关文章：