anchor tag refresh page

Question

I have a problem with anchor tag i fill my html table with append jQuery and inside a td there is anchor tag when i click on it instead of calling it's function it refresh the page:

 $('.show-directions').click(function( event ) { event.preventDefault(); $('.ui.modal').modal('show'); setTimeout(function() { initMap(); }, 500); }); function initMap(){ console.log("initMap has been called."); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <a class="show-directions" href="">Detail</a> 

Answer 1

As you can see (after my edit to your question), assuming you have properly referenced the Bootstrap library, your code is working as it should. Your issue therefore must be with something else on the page.

You've indicated that you are dynamically adding the a element with .append() . In this case, the click event handler is being registered before the element has been added to the document. To ensure that it is handled, use "event delegation" , which is the process of setting up the event handler on a higher level element (that exists at the time of the event registration) in the document and then when the event is later initiated by a lower-level element, event bubbling causes it to arrive at the higher element. You then check to see what element initiated the event.

Having said all of this, you should not use an a for this in the first place. <a> elements are for navigation, not for hooks into JavaScript. It is semantically incorrect to use a hyperlink for non-navigational tasks. It will cause problems for users who use assitive technologies (like screen readers) to surf the web, and (as you already know, given your code) requires you to disable the browser's native desire to navigate by adding event.preventDefault() .

Instead use some other element to trigger your function, like a span element:

 // Intercept the event at the document level, but check to see if // it originated with an element that has the .show-direcions class $(document, '.show-directions').click(function( event ) { $('.ui.modal').modal('show'); setTimeout(function() { initMap(); }, 500); }); function initMap(){ console.log("initMap has been called."); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <span class="show-directions">Detail</span> 

Answer 2

Change your code to the following:

$(document).on('click', '.show-directions', function(){ 
   //YourCode
}); 

And it should work.

For an explanation of the problem, read @Optimus Prime answer's here: Why doesn't click work on appended elements?

Answer 3

I did something else

<a class="show-directions" href="javascript:tacos();" >

and i called the function tacos which has do the same thing

function tacos () {
        $('.ui.modal').modal('show');
        setTimeout(function() {

            initMap();
        }, 2000);
    }

Answer 4

Add this in script $(function(){$("#AnchorTagID").click(function(){return false;});}); or use <button type='button'>Add Anchor Attributes here<button/>

Or instead you can add href="#" instead of empty href or entirely remove it from there.