using confirm alert box in js inside another function

Question

I had a confirmation box that showed a confirmation alert when clicking on the delete button,

heres the function

<script type="text/javascript">
    $('.confirm').on('click', function () {
        return confirm('Are you sure you want to delete ?');
    });
</script>

it was working fine whenever i put a class for any html element, until i added it inside this function it stopped working

$(document).ready(function() {
  $('#list').dataTable({
    "ajax":{
          url :"list.php",
          type: "GET",
          error: function(){
            $("#post_list_processing").css("display","none");
          }
        },
        "columns": [
              { "data": "title" },
              { "data": "description" },
              {
                "data": function(item) {
                  return '<a class="confirm" href="delete.php?id=' + item.id + '">delete</i></a>';
                }
              }
          ]
  });
});

I'm confused, how are the two functions linked exactly? I don't see you use any of the functionality provided in the first function integrated with the second function? — Martin, Sep 24 '18 at 12:29
Im using class confirm in the second one when outputing the html element — , Sep 24 '18 at 12:31
I see now. Your problem is that the compiler is reading the code top-down, so the handler isn't added to dynamically added elements. There are already 2 answers down below though. — Martin, Sep 24 '18 at 12:35

score 2 · Answer 1 · answered Sep 24 '18 at 12:32

Seems like you have a timing problem here.

When you call $('.confirm').on('click', function () { /* ... */});, you attach a click handler to all elements with the class "confirm" that are currently in the DOM.

When you add another element with the "confirm" class later, no handler will have been registered for this new element.

The solution is to re-register the click handlers after you add the new element to the DOM:

$('.confirm').off('click'); // remove old handlers
$('.confirm').on('click', function () { /* ... */}); // register handlers again for all current elements

Juan Elfers · Accepted Answer · 2018-09-24T12:39:21.353

The problem seems to be that .confirm buttons aren't yet ready when you do the event binding. Please try this:

$('body').on('click', '.confirm', function () {
  return confirm('Are you sure you want to delete ?');
});

What changed here is that we are in fact binding the click event to the body, which is already available, but then filtering the callback to execute only when the real click-target was a ".confirm" element.

score 0 · Answer 3 · answered Sep 24 '18 at 12:40

The jQuery binds the event listener at runtime. If the confirm elements are not on the page, there won’t an element to bind to.

To circumvent this race condition, bind the event to a static element that is closest to the dynamically generated data.

$(‘#list’).on(‘click’, ‘.confirm’, function(){
  ...
})

While you could bind the event to the document or the body element, there are two reasons you would want to keep the handler closer to the affected data:

Mini performance reasons and less chance of something intercepting during the bubbling/propagation of the event
When inspecting element in the browser’s developer window, it is sometimes easier to visualize the events. It yields a quick snapshot and better sense of what may going on in the page, which is helpful for debugging

using confirm alert box in js inside another function

3 Answers3