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

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

Answer 2

the live function is deprecated, you should use .on

e.g.

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