jQuery live（）方法仅触发一次

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!!

Answer 1

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);

});

Answer 2

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.