PreventDefault does not work at anchor

Question

I am trying to record a click on an anchor that is created asynchronously.

An asynchronous call that works fine looks like this:

$("#txt_search").keyup(function() { var search = $("#txt_search").val(); if (search.length > 0) { $.ajax({ type: "post", url: "<?php echo site_url ('members/searchmember') ;?>", data:'search=' + search, success: function(msg){ $('#search_results').html(""); var obj = JSON.parse(msg); if (obj.length > 0) { try { var items=[]; $.each(obj, function(i,val){ items.push($('<li class="search_result" />').html( '<img src="<?php echo base_url(); ?>' + val.userImage + ' " /><a class="user_name" href="" rel="' + val.userId + '">' + val.userFirstName + ' ' + val.userLastName + ' (' + val.userEmail + ')</a>' ) ); }); $('#search_results').append.apply($('#search_results'), items); } catch(e) { alert(e); } } else { $('#search_results').html($('<li/>').text('This user does not have an account yet')); } }, error: function(){ alert('The connection is lost'); } }); } }); 

The anchor I want to get to is <a class="user_name" href="" rel="' + val.userId + '">' + val.userFirstName + ' ' + val.userLastName + ' (' + val.userEmail + ')</a>'

I detect a click on these anchors with this function:

  // click op search results $("a.user_name").on('click', function(e) { e.preventDefault(); }); 

The problem is that preventDefault does nothing ... I reviewed most of the issues related to this issue in Stackoverflow, and checked my own jQuery documentation, but I can't seem to find what is wrong. I tried to add the async: false statement to the AJAX call, because maybe an asynchronous call might be a problem, but that doesn't fix it.

Answer 1

An event is not associated with a dynamically added element unless you delegate it to the parent element or document using on () . You must use different forms to delegate events.

 $(document).on('click', 'a.user_name', function(e) { e.preventDefault(); }); 

delegated events

Event handlers are bound only to the currently selected elements; They must exist on the page when your code makes a .on () call. To make sure that elements are present and can be selected, perform the binding event inside the finished document document for elements that are in the HTML markup on the page. If new HTML is entered on the page, select the elements and attach event handlers after the new HTML is placed on the page. Or use delegated events to attach an event handler, as described below.

Delegated events have the advantage that they can handle events from descendant elements that will be added to the document later. From selecting the item that is guaranteed to be present during the delegated event handler, you can use delegated events to avoid the need to often attach and remove event handlers. Link

Answer 2

The .on() syntax that you showed will bind handlers to elements that currently match the selector, and not to elements added in the future. Try instead:

 $("#search_results").on("click", "a.user_name", function(e) { e.preventDefault(); }); 

This binds the handler to the parent element, and then when the click occurs, jQuery only calls your callback function if the actual target element matches the selector in the .on() second parameter during the click. Thus, it works for dynamically added elements (as long as the parent exists at runtime above).

Answer 3

This should work for you -

 $('.search_result').on('click', 'a.user_name', function(){ // your code here // code return false; }); 

Answer 4

try it

  $("a.user_name").on('click', function(e) { return false; }); 

or

  $(document).on('click', 'a.user_name', function(e) { e.preventDefault(); }); 

Difference between .on () function calls

Answer 5

I also had this problem, and it turned out that my selector was wrong.

Answer 6

Maybe your href is connected with other listeners. Check event.preventDefault event.stopImmediatePropagation (); together. You can check this site for more information https://codeplanet.io/preventdefault-vs-stoppropagation-vs-stopimmediatepropagation/