There is something like this:

$(document).ready(function(){ $("div").bind('click', function(event) { $(this).append("<p>...</p>"); }); $("p").bind('click', function(event){ alert("..."); }) });

The event associated with the element created by the first event does not work. What's wrong?

    3 answers 3

    You tried to bind an event to a selection of items, making a selection when the items themselves did not exist. Accordingly, since there was nothing to tie the event to, it did not become attached to anything.

    In other words, the elements must exist at the time of binding the event .
    We must do so:

     $("div").on("click", "p", function(event){ alert("..."); })

      The event does not exist in isolation from the elements. The second bandage is implemented as follows: the p elements are sampled, and the event handler is hung on them. All those elements that are not included in this sample will not have a handler. However, there is a hack with delegirvoanim events from higher-level elements, it is implemented in jQuery method. .on() .

        We read documentation :

        Handlers are elements of the jQuery object. For more flexible event binding, see .on () or .delegate ().

        bind() binds a handler to already existing elements. If you want it to extend to elements that do not exist at the time of binding, use on() .