Posting a click event using jQuery on () does not fire when entering HTML through an Ajax call

Question

I have a partial view that is returned via an Ajax call using dataType html. Inside this html there is an anchor tag with an identifier that I connect to the click event using the jQuery .on() API and version 1.7. 1 frame.

For brevity, imagine a partial view as follows:

 <div id="container" class="modal-dialog"> <h1>Heading</h1> <a id="thelink" href="#"> <img src="<%:Url.Content("~/Path/To/Image.jpg")%>" /></a> </div> 

.. and through the standard $.ajax POST to the MVC controller action, which returns the above as a result of the partial view, which I intercept and spit in a modal dialog.

The event code that I am trying to connect is as follows:

 $(function () { $("#thelink").on("click", function (e) { e.preventDefault(); $("#jquery-ui-dialog-box").dialog("close"); }); }); 

Now, if I switch on() to live() - everything works as expected. Using the code above, although the event does not fire in IE8 (IE8 standards mode) - breakpoints are not affected, the jQuery UI modal code does not close according to the above example. When calling live() everything works as expected.

This is the first and only time I have ever seen the difference between the on () behavior and the outdated or "collapsed" event binding API (delegate, live, bind)

I have no problem returning to using live() or delegate() , but I would like to understand why this happens, if possible!

SB Relations

Answer 1

$(foo).live(type, handler) equivalent to $(document).on(type, foo, handler) , so try instead:

 $(function () { $(document).on("click", '#thelink', function (e) { e.preventDefault(); $("#jquery-ui-dialog-box").dialog("close"); }); }); 

The signature of live() confusing; you do not actually bind the handler to the selected elements, but to the document element, which listens to the event that will be fired on the element that matches the given selector ( How does jQuery.live () work? ).

$(foo).live(type, handler) equivalent to $(document).delegate(foo, type, handler) ;

For future use, $(foo).delegate(selector, type, handler) can be converted to on() only by replacing the first and second parameters; on() expects the event type first, then the (optional) selector.