Click events stop working after an Ajax load

问题:

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

回答1:

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

回答2:

the live function is deprecated, you should use .on

e.g.

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