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

我有一个

。 我还有一个按钮：

单击按钮时：用另一个替换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>");
});

这不起作用，我正在等待单击刚刚创建的div这一事实与此有关吗？

使用此选项

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

$（“#发送按钮”）。单击（函数（）{
$（“#myContainer”）。替换为（“+*设置清除”）；
$（“#mul”）。单击（函数（）{
log（'mul clicked！'）；
});
});

当您调用

$（“#mul”）。单击（）

，您将向

#mul

附加一个事件处理程序，因为它在该点上存在。要解决此问题，只需调用

$（“#mul”）。在创建
#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!' );
    });
});

您需要将事件附加到
#mul
。因为它是动态追加的，
$（“#mul”）。单击（）
将不起作用

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

尝试：

$（“#发送按钮”）。单击（函数（）{
$（“#myContainer”）。替换为（“+*设置清除”）；
//在此处添加侦听器
$（“#mul”）。单击（函数（）{
log（'mul clicked！'）；
});
$（“#mul”）.trigger（“click”）；//将其添加到代码中
});

请参阅触发器（）的详细信息

这是一个演示

您必须在新内容插入dom后添加侦听器。您可以使用方法将事件与动态添加的内容绑定

试试这个：

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


您也可以使用jquery
.on（）
，但在这里您可以添加动态内容。因此，您需要使用注册事件处理程序，如：

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

这不是OP要求的方法。这相当于单击按钮，他想知道为什么他的click事件处理程序不处理文档加载后动态创建的元素。您可以通过替换来完成此操作。单击“呼叫”并将应答替换为@Hiral@TomHeard对我没有认真地读这个问题。。但我似乎是无意中解决了这个问题：）我确实注意到，当我在评论时，这就是为什么我尽量不说你的答案是错误的，它只是有错误的意图=谢谢，非常有用的解释，非常欣赏你的屏幕名称，所以有点棒@fgf。。。
$("body").on("click","#mul",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

});

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

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