CODEWITHSUNDEEP
javascriptjquery
Kar Inter
Kar Inter

Reputation: 303

how to bind event to element after generateing

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 this 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 ?

Upvotes: 0

Views: 117

Answers (3)

Eddy
Eddy

Reputation: 3723

Though .delegate() method is deprecated in jquery-3.0, its description is still worth to have a look:

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.

Exmaple:

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

Using document as a root element is not a big problem, but have you tried #attachments ?

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

Upvotes: 0

Shiran Dror
Shiran Dror

Reputation: 1480

one way will be by attaching click event after html is set:

  $(document).on('click', '.nav-tabs li a[href="#attach"]', function() {
      var equipmentId = "?";
      var loadAttachmentsURL = "/url";
      $.ajax({
          url: loadAttachmentsURL,
          data: {
              equipmentId: equipmentId
          },
          success: function(data) {
              $("#attachments").html(data);
              $(".btn-delete-confirm").click(function() {
                  alert("click!");
              });
          }
      });
  });

another will be attaching the click event to the document context:

$(document).on('click', ".btn-delete-confirm", function() {
    alert("click!");
});
$(document).on('click', '.nav-tabs li a[href="#attach"]', function() {
    var equipmentId = "?";
    var loadAttachmentsURL = "/url";
    $.ajax({
        url: loadAttachmentsURL,
        data: {
            equipmentId: equipmentId
        },
        success: function(data) {
            $("#attachments").html(data);
        }
    });
});

Upvotes: 1

Maurice Buiten
Maurice Buiten

Reputation: 304

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 () {...});
    }
});

});

Upvotes: 0

Related Questions