jquery之live(), delegate(), on() 方法

通过下面的一个实例理解 jQuery 的 live(), delegate(), on() 方法

How to bind event to element after generated?
页面元素如何在生成后绑定事件？


Question:

I have this script :

$(window).load(function () {
    $(document).on('click', '.btn-delete-confirm', function () {...});
});

and I have this element :

<div id="attachments"></div> 

and I have another script to load some html :

$(document).on('click', '.nav-tabs li a[href="#attach"]', function () {

    $.ajax({
        url: loadAttachmentsURL,
        data: { equipmentId: equipmentId },
        success: function (data) {
            $("#attachments").html(data);
        }
    });

});

in my result from ajax I have some button that have .btn-delete-confirm class
but when clicked on them nothing happen .

the sample of result like this :

<td><a  data-id="73b2db39-199c-845c-8807-6c6164d2d97d" 
        data-url="/Admin/EquipmentAttachment/Delete" 
        class="btn-delete-confirm btn">Delete</a></td>

how can I resolve this ?



Answer:

I would like to know which version of jQuery are you using?
According to the jQuery documentation:
.live() could have been used to bind events to future elements, but it has been deprecated.

.delegate() and .on() can be used for this
purpose now.  I can see that the code you wrote uses .on().
This should work fine unless you are not using version 1.7+.

引用

The .on() method attaches event handlers to the currently selected set of elements in the jQuery object.

As of jQuery 1.7, the .on() method provides all functionality required for attaching event handlers.

  - For help in converting from older jQuery event methods, see .bind(),  .delegate(), and .live().
  - To remove events bound with .on(), see .off().
  - To attach an event that runs only once and then removes itself, see .one()

引用

.delegate( selector, eventType, handler ) - Returns: jQueryversion deprecated: 3.0

Description:
Attach a handler to one or more events for all elements that match
the selector, now or in the future, based on a specific set of root elements.

// jQuery 1.4.3+
$( elements ).delegate( selector, events, data, handler );
// jQuery 1.7+
$( elements ).on( events, selector, data, handler );

$( "table" ).delegate( "td", "click", function() {
  $( this ).toggleClass( "chosen" );
});

$( "table" ).on( "click", "td", function() {
  $( this ).toggleClass( "chosen" );
});

Examples:

$( "body" ).delegate( "p", "click", function() {
    $( this ).after( "<p>Another paragraph!</p>" );
});

------------------------------------------------------------------

Answer 2:

You are trying to add an eventlistener to something that isnt there yet.
This will result in an error, and the event wont fire again.

So try to add the listener AFTER the ajax import.

$(document).on('click', '.nav-tabs li a[href="#attach"]', function () {

    $.ajax({
        url: loadAttachmentsURL,
        data: { equipmentId: equipmentId },
        success: function (data) {
            $('#attachments').html(data);
            $('.btn-delete-confirm').on('click', function () {...});
        }
    });
});

comments:
- I dont want to repeat the same code .
- your answer destroys the elegance of delegation of events for dynamic elements.












-
引用请注明：
原文出处：http://lixh1986.iteye.com/blog/2341345





-