jQuery .click() not binding properly

Question

I want to perform some action when a link is clicked, I am using the following code to achieve this however it rarely works. If I click the link it usually refreshes the page, and 1/10 times it'll actually pop up "Hi". What is wrong?

$(document).ready(function()
{
    $('#slconfiglink').click(function()
    {
        alert("hi");
        return false;
    });

});

HTML:

<ul>
    <li><a href="#" id="slconfiglink">Config 1</a></li>
</ul>

Note that the ID's are not replicated elsewhere in the HTML

are you using the same id on all the links?...as what i see in the code above? — Reigel Gallarde
– Reigel Gallarde, Commented May 12, 2010 at 13:16
I just pasted your code into an old jQuery test page of mine, and it works fine. I can't see anything wrong. Have you tried just this code in a single new test page, as an experiment? — Matt Gibson
– Matt Gibson, Commented May 12, 2010 at 13:26
@Piotr 1.4.1 and Firefox. @Matt I have used the same code I pasted on lots of other pages making me wonder whats different about this one? — Chris
– Chris, Commented May 12, 2010 at 13:44

Nick Craver · Accepted Answer · 2010-05-12 13:15:18Z

5

Make sure to give your <a> a valid href, like this:

<a href="#" id="slconfiglink">Config 1</a>

Your anchor needs to have an href or a name to be valid, otherwise you'll get some funny behavior that'll vary by the browser used.

Also, unless you need the anchor for hover CSS, etc...you have the option to put the click handler right on the <li>, like this:

<ul>
  <li id="slconfiglink">Config 1</li>
</ul>

A few other things to check, make sure that ID is unique, if it's not use a class, like class="slconfiglink" and your selector would be ".slconfiglink" instead of "#slconfiglink".

If your elements are being added on the fly, change from

$('#slconfiglink').click(function() {

To use .live() like this (or with the class selector, if the multiple comment applies):

$('#slconfiglink').live('click', function() {

answered May 12, 2010 at 13:15

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

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

7 Comments

Nick Craver Over a year ago

@Chris - Updated with some more scenarios to check, see if any apply.

Chris Over a year ago

Thanks Nick, very comprehensive answer however I'm still having no joy. I moved the ID to the <li> but this didn't work either. The HTML is static so no need for live() either. I'm totally confused as to why it's not working!

Nick Craver Over a year ago

@Chris - have an example page I can take a peek at?

Chris Over a year ago

@Nick - I changed my code to use live() instead of $(document).ready() and this works... I wonder if, for some reason, $(document).ready() is having issues on this particular page?

Nick Craver Over a year ago

@Chris - Are the elements added via ajax or anything?

|

David Yell · Accepted Answer · 2010-05-12 13:17:19Z

2

Is the element being created dynamically? If you are adding it using Javascript, you'll need to reattach your event handler after it's been added to the DOM.

answered May 12, 2010 at 13:17

David Yell

11.9k13 gold badges64 silver badges102 bronze badges

Comments

Fabian · Accepted Answer · 2010-05-12 13:17:52Z

2

Use the preventDefault() method to make sure the browser doesnt follow the link.

$(document).ready(function()
{
    $('#slconfiglink').click(function(e) {
        e.preventDefault();
        alert("hi");
    });
});

answered May 12, 2010 at 13:17

Fabian

13.7k6 gold badges33 silver badges53 bronze badges

1 Comment

Nick Craver Over a year ago

return false already prevents the default behavior and any bubbling.

Jayme Tosi Neto · Accepted Answer · 2010-05-12 14:14:23Z

0

I had the same problem yesterday.
To solve I've just used simple javascript in combination with jQuery.

That's what I've done:

<script>
    function yourFunction()
    {
        alert("hi");
        //$("#slconfiglink").doWhatYouWant();
    }
    $(document).ready(function()
    {
        $("#slconfiglink").attr('onclick', 'yourFunction();')
           //I did it in this way to garantee the function 
           //will only be called after the DOM is ready
    });
</script>

<a id="slconfiglink" href="javascript:;">click me</a>

I hope this could be useful! ^^

answered May 12, 2010 at 14:14

Jayme Tosi Neto

1,2392 gold badges22 silver badges43 bronze badges

Comments

Sundararajan S · Accepted Answer · 2010-05-12 14:19:13Z

0

could you try changing the href of anchor tag to 'javascript:void(0);'

answered May 12, 2010 at 14:19

Sundararajan S

1,3782 gold badges16 silver badges24 bronze badges

Collectives™ on Stack Overflow

jQuery .click() not binding properly

5 Answers 5

7 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

7 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related