jQuery live() method fires only once

Question

I have seen similar quesitons answered on the website, but I can't find a fix that works for me :(

I am trying to use jQuery's live() method to trigger an event several time in a page's division after it's content is refreshed, when clicking on a link within the division itself.

The content is first loaded in "divdroite" after a click on a link within "divgauche", and then I'd like clicks within "divdroite" to refresh its own content any number of times.

The code is as follows :

$j("body").on('click', "#divgauche a", function (event1) {
    $j("#divdroite").load((this.href + " #courscontainer"), function () {
        $j('#divdroite .collapsible').on('click', function (g) {
            $j('>*:has(*)', g.target).slideToggle(300);
            g.preventDefault();
            g.stopPropagation();
        });
    });
    event1.preventDefault();
    event1.stopPropagation();
});

$j("#divdroite a").live('click', function (event2) {
    $j("#divdroite").load((this.href + " #courscontainer"), function () {
        $j('#divdroite .collapsible').on('click', function (h) {
            $j('>*:has(*)', h.target).slideToggle(300);
            h.preventDefault();
            h.stopPropagation();
        });
    });
    event2.preventDefault();
    event2.stopPropagation();
});

Any help would be greately appreciated.

Thanks!!

Just a thought. What version of jQuery are you using? `.live()` has been deprecated for ages. — emerson.marini, Sep 19 '14 at 21:45
@Taruckus `.live()` has the same purpose, but it's long deprecated. — emerson.marini, Sep 19 '14 at 21:49
Does this help at all? I had a similar issue. http://stackoverflow.com/questions/15090942/jquery-on-method-not-working-on-dynamic-content — Taruc, Sep 19 '14 at 21:49
I was using .on() and tried to add a delegate selector but it does the same thing: fires only once. So I tried using live() with the same inefficacy. Im using jquery 1.11.1 — JabbarTheSheet, Sep 19 '14 at 21:51
@Taruckus : thanks for the share. Problem is: if I use a delegate selectors it appears to mess with my use of "this" on the next line. — JabbarTheSheet, Sep 19 '14 at 21:53
So, this isn't working either? `$j("body").on('click', "#divdroite a", function (event2)` — emerson.marini, Sep 19 '14 at 21:53
it works the first time and then nothing happens, the click doesnt even seem to trigger the code (my console.logs are not displayed) — JabbarTheSheet, Sep 19 '14 at 22:09

score 0 · Answer 1 · answered Sep 19 '14 at 21:55

0

Try adding the .complete callback on the .load event to apply a click event to the element you just loaded.

$j("#divdroite").load((this.href + " #courscontainer"), function ()
    {
       $j('#divdroite .collapsible').on('click',function(h)
       {
       $j('>*:has(*)',h.target).slideToggle(300);
         h.preventDefault();
         h.stopPropagation(); 
       });
    }); 
event2.preventDefault(); 
event2.stopPropagation(); 
})
.complete(function(){
 // add code your click event code here that will apply to the loaded div
$("#coursecontainer").on('click',someFunction);

});

answered Sep 19 '14 at 21:55

Egregory

218
2
9

Hi. Thanks, that would work but then again the same problem happens >> it works once and then stops working. I can use the function itself as a callback function and it will work one more time every time I queue it, but it doesnt look really well and makes the code impossible to read. I'm sure there must be cleaner way to do it? – JabbarTheSheet Sep 19 '14 at 22:01
ah ok yeah sorry I must of misunderstood the question. You might be able to get away with .on('change',someFunction) in the callback. Are you adding dynamic content each time? If you can create a [jsFiddle](http://jsfiddle.net/) it would make it a lot easier for people to help fix your problem. – Egregory Sep 19 '14 at 22:06

score 0 · Answer 2 · answered Sep 19 '14 at 22:28

It's hard to see exactly what's going on, however ...

In the same way that you delegate clicks on a elements, you should also be able to delegate clicks on .collapsible elements.

Using .on(eventType, selector, fn) syntax (twice), the code should be something like this :

$j("#divdroite").on('click', "a", function (e) {
    e.preventDefault();
    e.stopPropagation();
    $j("#divdroite").load((this.href + " #courscontainer"));
}).on('click', '.collapsible', function (e) {
    e.preventDefault();
    e.stopPropagation();
    $j('>*:has(*)', e.target).slideToggle(300);
});

The only assumption there is that #divdroite is a static element that doesn't get removed/replaced (by some other piece of javascript). If it still doesn't work, then I'm guessing that's what's happening.

jQuery live() method fires only once

2 Answers2