Why does jQuery do nothing On Click?

Question

I have a very weird question today. I am building a huge application with jQuery, Ajax and PHP.

Basically I'm loading the contents of a div with PHP once the page loads.

<div id="samplediv">
    <a href="#" id="click1">Test1</a>
    <a href="#" id="click2">Test2</a>
    <a href="#" id="click3">Test3</a>
</div>

When someone clicks on these, an alert should come up, like this:

$("#click1").on("click", function(){
    alert(1);
});

However if the client clicks on

<a href="#" id="click_here">Click</a>

a jQuery function is triggered like the following:

$("#click_here").on("click", function(){
    fillDiv();
});

fillDiv() function is basically calls and ajax function and fills the div with the result, the PHP page returns.

This is basically the exact same as the top div. Php returns the followig:

        <a href="#" id="click1">Test1</a>
        <a href="#" id="click2">Test2</a>
        <a href="#" id="click3">Test3</a>

And the fillDiv() function places this into the samplediv. I've checked the HTML of the 2 result is the Exact same!

Problem:

When the items are loaded back from the Ajax function, with thee exact same html, IF I click on any of the Test1, Test2, Test3 links, I got back nothing actually. No alert, nothing. Not even an error message.

What could be the issue, which I didn't encounter?

You're replacing the elements right? Then they lose all their assigned events unless you use event delegation. — h2ooooooo, Mar 12 '14 at 15:55
@NinjaDevelopers Stop living in the past. `.live` was deprecated in 1.7, removed in 1.9. `.on` should be used for event delegatin. — Barmar, Mar 12 '14 at 15:56
live() is depricated in the lastest jQuery version. I am using Click — Florin, Mar 12 '14 at 15:57
Is there a reason you're using anchor tags for this? You should be using e.preventDefault() at the very least. Why not use spans or divs for this click behavior? You can style them to look like anchors. — Sean Kendle, Mar 12 '14 at 15:59
@SeanKendle it's relatively common to use anchor tags due to the built-in functionality it provides, such as being focusable and being able to "click" it by pressing enter or spacebar with it focused. — Kevin B, Mar 12 '14 at 16:12
Fair enough. In those cases, I suppose the extra "preventDefault" is worth it. — Sean Kendle, Mar 12 '14 at 16:28

GreatBlakes · Answer 1 · 2015-02-20T15:48:12.537

3

You'll want to change the .on() method to a deferred selector because you are refreshing elements. Something like:

$("body").on("click", "#click1", function(){
    alert(1);
});

edited Feb 20 '15 at 15:48

answered Mar 12 '14 at 15:57

GreatBlakes

3,971
4
20
28

score 1 · Answer 2 · answered Mar 12 '14 at 15:58

1

.live() is actually deprecated.

Try this:

$(document).on("click", '#click1', function(){
    alert(1);
});

answered Mar 12 '14 at 15:58

iMakeWebsites

587
3
10

Have the absolutely same result. – Taboo Loco Mar 12 '14 at 15:58
That might be a little over-scoped using `document`, though would work. If the parent of the node that loads in the ajax can be used I'd recommend that instead in the first selector. – Alex Mar 12 '14 at 16:00
Try mine. Your anchor tags may be the culprits, since they are ostensibly being followed as links. I recommend you change them to divs or spans. – Sean Kendle Mar 12 '14 at 16:03
ahh yes you could add this: `function(e){ e.preventDefault(); alert(1); ` to keep it from following the link and doing the jquery click instead – iMakeWebsites Mar 12 '14 at 17:18

score 0 · Answer 3 · answered Mar 12 '14 at 15:58

0

I think (with my bare knowlegde of jQuery) that it might be because the DOM isn 't loaded again. This way jQuery doensn't know that there are new elements to follow.

Besides that, you might want to use the .click event handler instead of .on

answered Mar 12 '14 at 15:58

Chilion

4,380
4
33
48

score 0 · Answer 4 · answered Mar 12 '14 at 15:59

The problem is that you bind at rendering the element with id "#click1" to do a click, where this element doesn't exist yet, since it will be a dynamically inserted with AJAX, this solution would work when it was <= JQuery 1.7 with live().

Try this:

$(document.body).on('click', '#click1' ,function(){ 
// Your logic here
}

$(document.body).on('click', '#click2' ,function(){ 
// Your logic here
}

$(document.body).on('click', '#click3' ,function(){ 
// Your logic here
}

score 0 · Answer 5 · answered Mar 12 '14 at 16:00

0

Change this:

$("#click1").on("click", function(){
    alert(1);
});

to:

$(document).on("click", "#click1", function(e){
    e.preventDefault();
    e.stopPropagation();
    alert(1);
});

answered Mar 12 '14 at 16:00

Sean Kendle

3,538
1
27
34

Actually tried, but nothing happens after I've changed it. – Taboo Loco Mar 12 '14 at 16:08
Are you setting this listener after DOM ready? Inside `$(document).ready(function (){});` ?? I find that sometimes event listeners won't wire up until after DOM ready. – Sean Kendle Mar 12 '14 at 16:27
Yes they are in the document.ready function. Is it a problem? – Taboo Loco Mar 12 '14 at 16:41
Try moving it outside of that function. I find (with seemingly no rhyme or reason) that sometimes they work inside document ready, and sometimes they only work outside... – Sean Kendle Mar 12 '14 at 17:01

score 0 · Answer 6 · answered Mar 12 '14 at 16:06

a much better solution would be to use .on but attach that to a div (or body) that's not being modified by the AJAX call.

<div id="samplediv">
<a href="#" id="click1" class="clickable">Test1</a>
<a href="#" id="click2" class="clickable">Test2</a>
<a href="#" id="click3" class="clickable">Test3</a>
</div>


$("#samplediv").on("click", ".clickable", function() {
  alert(1);
}

Look at sample here (.on is attached to body in this case) http://jsfiddle.net/rahul71/3vDvN/

Why does jQuery do nothing On Click?

Problem:

6 Answers6