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

Question

I have a <div id="myContainer"></div> . I also have a button: <input type="button" value="Send" id="sendButton"> While clicking at the button: it replaces the DIV with another:

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

I want to activate another function after click on a new button I've just put ( <button id=\\"mul\\">*</button> ):

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

Which doesn't work, the fact that I'm waiting for a click on a div that just created have something to do with it?

Answer 1

You need to attach event to #mul . Because it is appended dynamically, $("#mul").click() will not work.

.on() attaches event handlers to the currently selected set of elements.

Try:

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

More information here.

Answer 2

When you call $( "#mul" ).click() , you're attaching an event handler to #mul as it exists at that point. To fix this, just call $( "#mul" ).click() after you create #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!' );
    });
});

You could also use jQuery's .on method with the optional selector, called a delegated event handler according to the documentation. Take a look at the API for jQuery if that's what you want: jQuery API documentation . The basic usage would be something like

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

Answer 3

use this

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

instead of

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

or

    $( "#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/ see detail of trigger()

http://jsfiddle.net/tnnj5/ here is a demo

you must add listener after the new content has insert into dom

Answer 5

You can use .live() method to bind event with dynamically added content.

Try this:

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

Try in fiddle

You can also use jquery .on() , But here you add dynamic content. So you need to use event delegation to register the event handler like:

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

Try in jsfiddle with on