与动态div绑定jQuery

Question

I have an issue with jquery. Say i have 2 divs in jquery,

<div id='1'>               //static div
</div>

<div id='2'>               //dynamic div
</div>

The static div is always present in the document, but dynamic div toggle when we click over static div. Now what i want is to place an event on dynamic div something like :

$(document).on("show", "#2", {}, function() {
 alert("div 2 present");
});

so that i can do something when dynamic div is present in the document. How can i do this ?

Answer 1

There is no 'show' event triggered by an element when it becomes visible. You will have to tie the handler to the event which causes the element to become visible in the first place. In this case, that seems to be a click event on the first div:

$(document).on("click", "#1", function() {
    $("#2").toggle();

    if ( $("#2").is(":visible") ) {
        alert("div 2 present");
    }
});

Note that according to the HTML 4 spec., element IDs should not start with a number. That's alright in HTML 5, however.

A further improvement to note is that, when binding handlers to dynamically generated elements, it is better to target the nearest static parent element than to allow delegation to be handled at the document level; ie do $("#parent").on("click", element, function() {}) .

Finally, since <div id="1"> is static, you don't need a delegated event handler, you can bind the handler directly:

$("#1").click(function () {
    //...
});