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

我在使用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'); 

我尝试了另一种方法来解决我的问题 。 事实上,我想要做的只是通过改变课程来打开点击。

Html结构:

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

当我点击a.showtabinfo ,我希望div.infos.hidetab成为div.infos.showtab所以,我尝试不使用jQuery,而只使用JavaScript。 我在网上找到了一个帮助我改变课程的function:

 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-" href="Javascript: ;" onclick="addClass(this.parentNode.getElementsByClassName('infos'),'showtab');">CLICK HERE 

有人可以用第一种或第二种方式帮我解决问题吗?

如果您需要更多信息来回答我,请访问http://www.tom-portfolio.fr/demos/portfolio/category/portfolio/ ,看看我想做什么。 我只想将类名

to

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

不推荐使用live函数,你应该使用.on

例如

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