jquery替換DIV數據，然后跟蹤它的點擊次數

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!");
});

更多信息在這里。

Answer 2

當你調用$( "#mul" ).click() ，你將事件處理程序附加到#mul因為它在那時存在。 要解決此問題，請在創建#mul 后調用$( "#mul" ).click() 。 #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!' );
});

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/查看觸發器的詳細信息（）

http://jsfiddle.net/tnnj5/這是一個演示

在新內容插入dom后必須添加偵聽器

Answer 5

您可以使用.live()方法將事件與動態添加的內容綁定。

嘗試這個：

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

嘗試小提琴

您也可以使用jquery .on() ，但是在這里添加動態內容。 所以你需要使用事件委托來注冊事件處理程序，如：

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

嘗試使用jsfiddle