События нажатия перестают работать после загрузки Ajax

Question

У меня возникли проблемы со сценарием Ajax, который отключает мои события щелчка jQuery.

Следующий код работает без события AJAX:

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

Итак, я нашел в Jquery Faq что:

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

Но, к сожалению, я не являюсь разработчиком JavaScript и не смог преобразовать свои события jQuery с помощью «делегирования событий»,Может ли кто-нибудь помочь мне сделать так, чтобы мои события выглядели так:

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

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

---

Я попробовал другой способ решения своей проблемы .Фактически, я пытаюсь просто открыть div по клику, изменив класс.

Структура HTML:

-- div

------ a.showtabinfos

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

-- /div

Когда я нажимаюна a.showtabinfo s я хочу, чтобы div.infos.hidetab стал div.infos.showtab, поэтому я попытался сделать это без jQuery, но только с JavaScript.В Интернете я нашел функцию, которая помогает мне изменить класс:

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

    }
}

, и я попытался добавить ссылку, подобную этой:

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

---

Может ли кто-нибудь помочь мне спервый или второй способ решения моей проблемы?

если вам нужна дополнительная информация, чтобы ответить мне, просто посетите http://www.tom -portfolio.fr / demos / portfolio / category / portfolio / , чтобыпосмотри, что я пытаюсь сделать.Я просто хочу изменить имя класса <div class"infos hidetab"> to <div class="infos showtab">

Answer 1

Live добавит событие щелчка ко всем элементам, находящимся на странице в данный момент, и любым добавленным в будущем:

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

Я бы также рекомендовал использовать delegate, но не могу точно показать вам, как это сделать без дополнительной разметки, потому что вам нужно в основном прикрепить событие к родительскому контейнеру, например так:

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

Изменить:

Глядя на вашу страницу, мне немного неясно, включен ли jQuery noConflict или нет, но я думаю, что это следует сделать:

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

функция live устарела, вы должны использовать .on

например

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