Event binding .on() not working, on dynamic buttons

Question

I've used the method shown in this answer Event Binding on dynamically created elements?

However the problem is in this code this technique is not working

//Event Binding
$("#check_it_trial_0").on('click', '.delete_addr', function() {
  "use strict";
  alert("oo");
});

$(document).ready(function() {
  "use strict";
  $('.d_address .delete_ad').click(function() {
    //var elem = $(this).closest('.d_address');

    $.confirm({
      'message': 'Are you sure, you want to delete this address?',
      'buttons': {
        'Delete': {
          'class': 'delete',
          'action': function() {
            //elem.slideUp();
          }
        },
        'Cancel': {
          'class': 'cancel',
          'action': function() {} // Nothing to do in this case. You can as well omit the action property.
        }
      }
    });
  });
});

(function($) {
  "use strict";
  $.confirm = function(params) {
    if ($('#confirmOverlay').length) {
      // A confirm is already shown on the page:
      return false;
    }

    var buttonHTML = '';
    $.each(params.buttons, function(name, obj) {
      // Generating the markup for the buttons:
      if (obj['class'] === 'delete') {
        buttonHTML += '<button class="delete_addr ' + 'button ' + obj['class'] + '">' + name + '</button>';
      } else {
        buttonHTML += '<button class="cancel ' + 'button ' + obj['class'] + '">' + name + '</button>';
      }
      if (!obj.action) {
        obj.action = function() {};
      }
    });

    var markup = [
      '<div id="confirmOverlay">',
      '<div id = "holding" >',
      '<div id="confirmBox">',
      '<p>', params.message, '</p>',
      '<div id="confirmButtons">',
      buttonHTML,
      '</div></div></div></div>'
    ].join('');
    $(markup).hide().appendTo('#check_it_trial_0').fadeIn();

    var buttons = $('#confirmBox .button'),
      i = 0;

    $.each(params.buttons, function(name, obj) {
      buttons.eq(i++).click(function() {

        // Calling the action attribute when a
        // click occurs, and hiding the confirm.

        obj.action();
        $.confirm.hide();
        return false;
      });
    });
  };

  $.confirm.hide = function() {
    $('#confirmOverlay').fadeOut(function() {
      $(this).remove();
    });
  };
})(jQuery); // JavaScript Document

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='d_address'>
  <span class='_in_b in_ed_de delete_ad'>Delete</span>
</div>
<div id="check_it_trial_0"></div>

When I run this code, the on('click') function don't work. Even here I am using $(staticAncestors).on(eventName, dynamicChild, function() {}); this logic

You've placed the `on()` call outside of the document.ready handler, so you're trying to add the event hook *before* `#check_it_trial_0` exists. Move it inside document.ready — Rory McCrossan, Mar 12 '19 at 10:14
That's because you include `return false;` to the second handler you (for some reason) add to the button which stops event propagation. Remove that line. Use just `preventDefault()` if required. https://jsfiddle.net/pwvksm0q/ *However* I'd suggest removing that loop which adds click event handlers to the buttons. It makes the delegated event handler (which is the better approach) completely redundant. — Rory McCrossan, Mar 12 '19 at 10:24

score 1 · Accepted Answer · answered Mar 13 '19 at 06:09

Replace your jquery code with this one.

    $(document).ready(function() {
  "use strict";

  //Event Binding
  $("#check_it_trial_0").on('click', '.delete_addr', function() {
    "use strict";
    alert("oo");
  });

  $('.d_address .delete_ad').click(function() {
    //var elem = $(this).closest('.d_address');

    $.confirm({
      'message': 'Are you sure, you want to delete this address?',
      'buttons': {
        'Delete': {
          'class': 'delete',
          'action': function() {
            //elem.slideUp();
          }
        },
        'Cancel': {
          'class': 'cancel',
          'action': function() {} // Nothing to do in this case. You can as well omit the action property.
        }
      }
    });
  });
});

(function($) {
  "use strict";
  $.confirm = function(params) {
    if ($('#confirmOverlay').length) {
      // A confirm is already shown on the page:
      return false;
    }

    var buttonHTML = '';
    $.each(params.buttons, function(name, obj) {
      // Generating the markup for the buttons:
      if (obj['class'] === 'delete') {
        buttonHTML += '<button type="button" class="delete_addr ' + 'button ' + obj['class'] + '">' + name + '</button>';
      } else {
        buttonHTML += '<button type="button" class="cancel ' + 'button ' + obj['class'] + '">' + name + '</button>';
      }
      if (!obj.action) {
        obj.action = function() {};
      }
    });

    var markup = [
      '<div id="confirmOverlay">',
      '<div id = "holding" >',
      '<div id="confirmBox">',
      '<p>', params.message, '</p>',
      '<div id="confirmButtons">',
      buttonHTML,
      '</div></div></div></div>'
    ].join('');
    $(markup).hide().appendTo('#check_it_trial_0').fadeIn();

    var buttons = $('#confirmBox .button'),
      i = 0;

    $.each(params.buttons, function(name, obj) {
      buttons.eq(i++).click(function() {
        obj.action();
        $.confirm.hide();
      });
    });
  };

  $.confirm.hide = function() {
    $('#confirmOverlay').fadeOut(function() {
      $(this).remove();
    });
  };
})(jQuery); // JavaScript Document

Event binding .on() not working, on dynamic buttons

1 Answers1