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

a_man Published at Dev

a_man

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

pyrogrammer

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

Collected from the Internet

Please contact [email protected] to delete if infringement.