jQuery e.preventDefault(); stops working after reloading div

[eluser]mojitoo[/eluser]
Hey!

I've have a problem with jquery and codeigniter, e.preventDefault(); stops working after I've reloaded a div with jquery and I've no idea why so I need you're help to find / solve the problem

I add comments with the following code and the reload the div

Code:

addComments: function( comment ) {

   var form_data = {
      comment: comment,
      list_id: list_id,
      ajax: '1'
     };

   $.ajax({
    url: base_url + 'lists/add_new_comment',
    type: 'POST',
    data: form_data,
    dataType : 'json',
    success: function(data) {
     $('#comment_wrapper').load(base_url + 'lists/refresh_comments/' + data.result, function() {
      // reload javascript objects
      Essentials.hasJavaScript();
     });
     // empty outputs that might be left
     $('.comment_msg').html('');
     $('#comment').val('');
    }
   });
  }

And everything seems to be working, the delete link is correct and everything. But e.preventDefault(); doesn't work any longer

Code:

$('.delete_comment').on('click', function(e){

  e.preventDefault();

Why? Please help me solving this annoying bug. This works if I press delete before I make a comment.

[eluser]ojcarga[/eluser]
I had an issue regarding that, I loaded all my page (users listing) I had (delete/edit/view) on each row for each user, everything worked fine, when I clicked on "delete" the action was performed on the server by ajax and then the response was the list of users without the last one a deleted, when I tried to click delete again for other user it does not worked.

That happens cause when the entire page loads JQuery looked for the objects in the DOM where the action take effect and attach the event to it, but when the new content (users list) is loaded dynamically using ajax it has no event attached to the "new" content, so I fixed sending the new content and in the bottom of my server response a added the lines of JQuery related to that content... something like this:

Code:

<table>
<tr>
  <td>
    user..............
  </td>
  <td>
    <a class="delete">Delete</a>
  </td>
</tr>
</table>

&lt; script type="text/javascript" &gt;
$("table a.delete").click(function(){
.......
});
< /script >

Hope this is your problem and it can help.

[eluser]CroNiX[/eluser]
Try having your function return false at the end.

[eluser]mojitoo[/eluser]
Well, it doesn't work to return false.

ojcarga, your solution works but it's not optimal since I'm not able to call functions in my script.js file. Is there any other way that I can let jQuery know about my new DOM elements?

[eluser]Unknown[/eluser]
As you are adding new content to the DOM, it will not automatically have event handlers applied to it. You need to use the live method which allows for the binding of event handlers to all elements that match a selector, including those created in the future.

Code:

$("a.delete").live("click", function(e) {  
    e.preventDefault();
});

[eluser]boltsabre[/eluser]
As mentioned, it's because when you load new elements into the DOM, they don't have any event handlers attached to them, this is a great article to get you started on it. Enjoy

http://www.learningjquery.com/2008/05/wo...nts-part-2

[eluser]GrahamDj28[/eluser]
Create a holding container which is not reloaded and remains in the DOM.

Say like:

Code:

<div id="my-list">
    <div class="delete_comment">Blablabla</div>
    <div class="delete_comment">Blablabla</div>
    <div class="delete_comment">Blablabla</div>
    <div class="delete_comment">Blablabla</div>
    <div class="delete_comment">Blablabla</div>
    <div class="delete_comment">Blablabla</div>
</div>

&lt; script &gt;
    $('#my-list').find('.delete_comment').on('click', function(e) {
        e.preventDefault();
    });
&lt;/ script &gt;

But while writing this I think to myself, why reload the DOM?
You can also create new DOM elements and append them to the list which is already there.

And if al you want is to prevent a link from executing you can add the attribute onClick="return false" to the <a> tag.