How to preventDefault on dynamically created anchors

Question

I have a list of tasks with id #tasks with delete anchors with class .deleteTask next to each list element. This elements and its delete links are created dynamically by ajax. So if I want hook some handlers to elements I use it like this:

$('#tasks').on('click', '.deleteTask', function (event)
{
    if( ! confirm('Are you sure?') ) event.preventDefault();
});

But it seems the click event on anchors with class .deleteTask is triggered before the click on parent #tasks element. So I can't call preventDefault() on it. I think it is because of bubbling. But how can I trigger preventDefault() on anchors which are dynamically created?

Here is the example https://jsfiddle.net/dyLa915b/1/

score 2 · Accepted Answer · edited Sep 19 '17 at 09:27

There are three things you should change.

1st: You are using same id for numbers of ids tasks on the same page which is wrong. The ID attribute should be unique in one DOM. So you should use class instead id. And then you should use that class as a selector with jQuery.

2nd: You said that these elements are dynamically created, so they are not known to the DOM because when the page was rendered 1st time they were not there on DOM. They were created after DOM got ready. In such cases you should use jQuery event delegation.

3rd: write preventDefault at very first line of your jQuery function.

So final updated code would be :

$(document).on('click', '.delete', function (event)
{
    event.preventDefault();
    if( ! confirm('Are you sure?') ) {
          // Write code if user clicks `ok` button of confirmbox.
    }
});

Your mistake caught when I checked your jsfiddle. I noticed that you are appending `` tag with `delete` class while you are defining click event jquery function on `deleteTask` class. Which is wrong. So considering `class="delete"` as a real class value, I have updated my code. I have checked it with jsfiddle too and its working as per your requirements. — Himanshu Upadhyay, Sep 18 '17 at 19:36

score 0 · Answer 2 · answered Sep 18 '17 at 18:42

You should put event.preventDefault() before your logic. Here's an example:-

var $links = $('.deleteTask');

$links.off('click').on('click', function($event){
  $event.preventDefault();
  $event.stopPropagation();
  
  if( ! confirm('Are you sure?') ){
  // do stuff  
  };
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <li>  
    <a class="deleteTask" href="www.google.com">Google</a>
  </li>
  <li>  
    <a class="deleteTask" href="www.youtube.com">Youtube</a>
  </li>
</div>

score 0 · Answer 3 · answered Sep 18 '17 at 18:51

0

You can use delegate for do it. delegate used for dynamic elements. please see this similar post.

answered Sep 18 '17 at 18:51

Ali Soltani

9,589
5
30
55

What is the different between on and delegate? It should be the same. Isn't it? – Čamo Sep 18 '17 at 19:03

How to preventDefault on dynamically created anchors

3 Answers3