Click events stop working after an Ajax load

Question

I'm having some trouble with an Ajax script which disables my jQuery click events.

The following code works without the AJAX event:

$(document).ready(function() { 
    $('a.showtabinfos').click(function() {
        $('div.infos').removeClass("showtab").addClass("hidetab");  
        $(this).parent().find('div.infos').removeClass("hidetab").addClass("showtab");
    });
});

So I found in the Jquery Faq that:

http://docs.jquery.com/Frequently_Asked_Questions#Why_do_my_events_stop_working_after_an_AJAX_request.3F

But unfortunately, I'm not a JavaScript developer and I wasn't able to convert my jQuery events using 'event delegation'. Can someone help me get my events to look like this:

$('#mydiv').click(function(e) {
    if($(e.target).is('a'))
    {
        fn.call(e.target,e);
    }
});

$('#mydiv').load('my.html');

I tried another way to solve my problem. In fact, what I am trying to do is simply open a div on click, by changing class.

Html structure :

-- div

------ a.showtabinfos

------ div.infos.hidetab  ( <div class='infos hidetab' ... </div> )

-- /div

When I click on a.showtabinfos, I want div.infos.hidetab to become div.infos.showtab so, I tried doing this without jQuery, but JavaScript only. I found a function on the web which helps me to change class:

function addClass(_element, _value)
{
    try
    {
        var oReg = new RegExp("^([\s]*)" + _value + "$");

        if(!_element.className)
        {
            _element.className = _value;
        }
        else
        {
            var bTest = oReg.test(_element.className);

            if(bTest)
            {

                _element.className = _element.className.replace(_value, "");
            }
            else
            {
                var newClassName;
                newClassName = _element.className;
                newClassName += " ";
                newClassName += _value;
                _element.className = newClassName;
            }
        }
    }
    catch(e)
    {

    }
}

and I tried to add a link like this:

<a class="showtabinfos" tabindex="1" id="imagetab-<?php the_ID(); ?>" href="Javascript: ;" onclick="addClass(this.parentNode.getElementsByClassName('infos'),'showtab');">CLICK HERE</a>

Can someone help me with the first or second way to solve my problem?

if you need more informations to answer me, just visit http://www.tom-portfolio.fr/demos/portfolio/category/portfolio/ to see what i am trying to do. I just want to change the class name <div class"infos hidetab"> to <div class="infos showtab">

betamax · Accepted Answer · 2011-07-22T13:39:30.510

10

Live will add the click event to any elements currently on the page and any added in the future:

$('a.showtabinfos').live("click", function() {
    $('div.infos').removeClass("showtab").addClass("hidetab");  
    $(this).parent().find('div.infos').removeClass("hidetab").addClass("showtab");
});

I would also reccomend using delegate but can't show you exactly how to do it without some more of your markup because you need to basically attach the event to a parent container like so:

$("#parent_element_of_links").delegate(".showtabinfos", "click", function(){
    $('div.infos').removeClass("showtab").addClass("hidetab");  
    $(this).parent().find('div.infos').removeClass("hidetab").addClass("showtab");
});

Edit:

Looking at your page, I'm a bit unclear as to wether you have jQuery noConflict enabled or not, but I think this should do it:

jQuery.noConflict();
(function($) { 
    $('a.showtabinfos').live("click", function(e) {
        $('div.infos').removeClass("showtab").addClass("hidetab");  
        $(this).siblings('div.infos').removeClass("hidetab").addClass("showtab");
        e.preventDefault();
    });
})(jQuery);

edited Jul 22 '11 at 13:39

answered Jul 22 '11 at 12:01

betamax

13,431
9
38
55

I tried the live function, and this is not working. I didn't try the second one u posted after, i will do, but if you need to know more on my markup, just see it live on my website ( this is a site under construction, i get it open just to let you see the problem : http://www.tom-portfolio.fr/demos/portfolio/category/portfolio/ I guess you have firebug. So try to change div.infos.hidetab to div.infos.showtab manually. That is exactlt what i want to happen when i click on an image. Thanks ! – KouiK Jul 22 '11 at 12:10
Re, i tried your last Edit, but this is still not working. It works if i disable the wordpress plugin "Ajax Comments-Reply". Maybe should i take a look on this plugin to see why this is disabling my click events ? Any idea ? – KouiK Jul 22 '11 at 13:07
Should i let you see the "comment.js' used by this plugin, which is generating new events, and so probably making troubles in my events ? – KouiK Jul 22 '11 at 13:14
Yeah might be useful to see that comments.js.. Also, try switching any `$` signs for `jQuery` just incase it's a conflict issue. – betamax Jul 22 '11 at 13:20
Edit : Switching `$` to `jQuery` changes nothing. Both are working, except with with the plugin activated. See comments.js here : http://www.tom-portfolio.fr/demos/portfolio/wp-content/plugins/ajaxcomment/comment.js – KouiK Jul 22 '11 at 13:22
Alternatively, could i use a `` ... If the syntax were correct, it should be what i'm searching for ^^ – KouiK Jul 22 '11 at 13:31
Ah, in the first line of the ajaxcomment plugin is `function $() {` which will overwrite the jQuery `$` object - Please look at jQuery.noConflict at http://api.jquery.com/jQuery.noConflict/. If you see my edit above, this may be what you need to resolve the conflict. – betamax Jul 22 '11 at 13:39
Damn !! Thank you so much ! I changed `function $() {` to `function $.noConflict() {` and it's now working !!! Oh god .. i've been searching for a soooo long time ... Thanks again ! – KouiK Jul 22 '11 at 13:51
BUT, now i have an error displayed by my "web-developper tools", saying "$.noConflict is not a function" And now, the "reply" link to answer doesn't work anymore ... Oh godd ... One problem solved, one new appears ... Rha. Need a coffee... Edit : All the Javascripts links for comments are now not working. Submit, preview button, reply, etc ... I may have made something wrong with the noConflict property ^^ – KouiK Jul 22 '11 at 13:55
No changing the function name to `function $.noConflict() {` will definitely not work.. Did you try the code in my edit above? – betamax Jul 22 '11 at 14:07
EDIT : I tried the code you gave me. It doesn't work. Nothing happend :( – KouiK Jul 22 '11 at 14:10
Please try replacing your code for comment.js with this: http://pastebin.com/raw.php?i=AHiY6VyC – betamax Jul 22 '11 at 14:14
Your last Edit made the stuff Works dude !!! I'll make some tests, and i will confirm you if it works well. Anyway, thanks you so much for the help you gave to me !! ( if i can do something to thank you back, don't hesitate ! ). I will close my website in 30minutes ( if you wants to take a look on the unstylized result ^^ ). I don't wants google to start indexing my pages ^^ – KouiK Jul 22 '11 at 14:16
Great! The problem was that the comments.js function was overriding the jQuery $ function. To fix this, I had to remove any references to the $() function in comments.js and replace with something else. – betamax Jul 22 '11 at 14:21
Ok. Thank you so. I will keep this thread on favorite to keep the tip on mind ^^ Great Job dude ! – KouiK Jul 22 '11 at 14:38

score 9 · Answer 2 · answered Jan 31 '13 at 12:18

9

the live function is deprecated, you should use .on

e.g.

$(document).on('click', '.selector', function(){ 
   //Your code here
});

answered Jan 31 '13 at 12:18

André Figueira

6,048
14
48
62

Click events stop working after an Ajax load

2 Answers2

Linked