jquery .click() event.preventDefault() not working

Question

I'm building a web application that is extendable by dropping scripts into a preset directory. The script needs to read file headers before going to a page, so I need to use .preventDefault() when links are clicked and run some JScript first. Unfortunately I can't get past the .preventDefault()

Here's my link format:

<a href="path/to/file.php" class="filelink">Some Text</a>

here's the jquery I'm trying to use to stop the default action:

    $( '.filelink' ).click( function( e ) {
        e.preventDefault();
        //do some other stuff here
    });

EDIT:

More Info:

The <script>...</script> is in my footer. This function is INSIDE $(document).ready AFTER a $.ajax call that builds the list of links this function is trying to listen for clicks of.

you're missing a closing ) in your jquery statement. the click event is never fired because of a syntax error. — r3wt
– r3wt, Commented Jan 9, 2015 at 23:14
lol, was actually in there editing it when you commented. I just mistyped it on entering it here. it now looks exactly as it does in myscript, but is not firing. — KingRichard
– KingRichard, Commented Jan 9, 2015 at 23:16
I rolled back the edit because it wasn't clear yet that the typo was just in question or in actual code at the time of edit. As written, with the fixed typo, i see no reason for the problem you describe. — user400654
– user400654, Commented Jan 9, 2015 at 23:17
Duplicate of Event binding on dynamically created elements? (can't vote to close anymore, someone else please do it (@KevinB)). — Felix Kling
– Felix Kling, Commented Jan 9, 2015 at 23:33

r3wt · Accepted Answer · 2015-01-09 23:30:06Z

85

Since your links are appended dynamically to the page, you need to use document.on() to capture the click events.

the syntax for appending event listeners to dynamic content is as follows

$(document).on( event, selector, callback );

so your click handler would become:

$(document).on('click','.filelink',function(e){

 e.preventDefault();

 //code here

 return false;

});

answered Jan 9, 2015 at 23:30

r3wt

4,7622 gold badges37 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

r3wt Over a year ago

because the element doesn't exist when you create the clickhandler, ie at the time dom loaded. jQuery doesn't listen for new elements in the selector list, it would be horribly innefficient and would crash on pages with dynamic content.

amenthes Over a year ago

the return false is not actually necessary. preventDefault() should be sufficient.

Felix Kling Over a year ago

@RichardN: I recommend to read the documentation: "Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on()."

Felix Kling Over a year ago

@r3wt: You are right. return false; is equivalent to calling event.preventDefault(); event.stopPropagation();.

Amjo Over a year ago

@amenthes to add to r3wt's remark, actually the return false prevents the #hashtag hyperlink to be displayed on the address bar which sometimes is strictly unwanted. probably for this case it's unnecessary, but just adding two cents here :)

|

Mouhamad Kawas · Accepted Answer · 2015-01-09 23:22:13Z

7

I think you missed $(document).ready()

Please update your code as following:

$(document).ready(function(){
     $( '.filelink' ).click( function( e ) {
        e.preventDefault();
        //do some other stuff here
    });

})

answered Jan 9, 2015 at 23:22

Mouhamad Kawas

3702 silver badges12 bronze badges

Comments

Santiago Hernández · Accepted Answer · 2015-01-09 23:31:23Z

3

is your code surrounded by:

$(function(){

//your code here

});

? or

$(document).ready(function(){

//your code here

});

? , because you should wait until the <a></a> element is ready before adding your click listener to it. try the code above or place your code at the bottom of the html right before the </body> tag or just right after the <a></a> element. that should work

EDIT: since your links are added dynamically call your $( '.filelink' ).click() function right after they are added

edited Jan 9, 2015 at 23:31

answered Jan 9, 2015 at 23:19

Santiago Hernández

5,6762 gold badges27 silver badges34 bronze badges

2 Comments

user400654 Over a year ago

you don't have to wait until the dom is ready before adding event listeners, you just need to ensure that the code executes after the element exists.

KingRichard Over a year ago

@SpencerWieczorek Kevin was saying the script has to be AFTER the <a>, which is correct, and doesn't have to be in document.ready

arthur.sw · Accepted Answer · 2016-10-01 15:12:05Z

0

I had the same problem, because I changed the window.location.search in my event handler:

 $( '.filelink' ).click( function( e ) {
        e.preventDefault();
       window.location.search = "something";
 });

To fix my problem I used window.location.hash (which is more what I wanted anyway).

answered Oct 1, 2016 at 15:12

arthur.sw

11.8k11 gold badges52 silver badges112 bronze badges

Comments

manian · Accepted Answer · 2019-07-30 08:23:21Z

0

For me, the issue was a syntax error in the Javascript code.

I substituted a php variable to one of the JS variable like below,

var myvar = "<?php echo $myvar; ?>";

which produced the below result,

var myvar = "value in "myvar" which is not escaped";

It worked when I escaped the variable.

Please check if there is any syntax error in your code.

edited Jul 30, 2019 at 8:23

answered Jul 29, 2019 at 12:05

manian

1,4482 gold badges18 silver badges34 bronze badges

Collectives™ on Stack Overflow

jquery .click() event.preventDefault() not working

5 Answers 5

8 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

8 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related