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开发人员而且我无法转换我的使用'event delegation'的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时，我希望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会将click事件添加到页面上当前的任何元素以及将来添加的任何元素：

$('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

e.g。

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

点击事件在Ajax加载后停止工作

2 个答案: