点击事件停止阿贾克斯后负荷工作 [英] Click events stop working after an Ajax load

问题描述

我在使用了Ajax脚本禁用我的jQuery的单击事件有些麻烦。

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

下面code作品，未经AJAX事件：

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

所以，我发现了 Jquery的常见问题是：

<一个href="http://docs.jquery.com/Frequently_Asked_Questions#Why_do_my_events_stop_working_after_an_AJAX_request.3F">http://docs.jquery.com/Frequently_Asked_Questions#Why_do_my_events_stop_working_after_an_AJAX_request.3F

但不幸的是，我不是一个JavaScript开发人员，我无法将我的 jQuery的事件使用事件代理。 有人可以帮助我让我的事件是这样的：

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

---

我尝试另一种方式来解决我的问题。事实上，我所要做的只是打开一个 DIV 上点击，通过改变类。

---

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结构：

-- div

------ a.showtabinfos

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

-- /div

当我点击 a.showtabinfo S，我想 div.infos.hidetab 成为 div.infos.showtab 所以，我想这样做并没有jQuery的，但JavaScript的唯一。 我在网上找到了一个函数，它可以帮助我改变类：

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?

如果你需要更多的信息来回答我，只是访问<一href="http://www.tom-portfolio.fr/demos/portfolio/category/portfolio/">http://www.tom-portfolio.fr/demos/portfolio/category/portfolio/看什么，我试图做的。 我只是想改变类的名称＆LT; D​​IV级的相关信息hidetab＆GT;到＆lt; DIV CLASS =的相关信息showtab＆GT;

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

推荐答案

投放 将click事件添加到任何元素当前页面上，并在未来的任何补充道：

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

我也reccomend使用 代理 但无法显示你到底如何，因为你需要的情况下基本上附加到父容器像这样做没有更多的标记：

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

编辑：

看你的网页，我有点不清楚你jQuery的noConflict启用或不作为还判定是否，但我认为这应该这样做：

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

这篇关于点击事件停止阿贾克斯后负荷工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！