点击事件在Ajax加载后停止工作 [英] Click events stop working after an Ajax load
问题描述
以下代码在没有AJAX事件的情况下工作：
$（document）.ready（function（）{
$（'a.showtabinfos'）。click（function（）{
$（'div.infos'）。removeClass（showtab）。addClass（hidetab）;
$（this）.parent（）find（'div.infos' hidetab）addClass（showtab）;
}）;
}）;
所以我在 Jquery Faq 中发现：
但不幸的是，我不是JavaScript开发人员，我无法使用'event delegate转换
jQuery事件。
有人可以帮我让我的活动看起来像这样：
$（'＃mydiv'）。函数（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）
{
}
}
，我尝试添加如下链接：
code>< a class =showtabinfostabindex =1id =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 classinfos hidetab>到< div class =infos showtab>
Live 将点击事件添加到页面上的任何元素和任何在未来添加：
$（'a.showtabinfos'）。live（click，function（）{
$（'div.infos'）。removeClass（showtab）。addClass（hidetab）;
$（this）.parent（）find（'div.infos' hidetab）addClass（showtab）;
}）;
我也会推荐使用 委托 ，但是如果没有更多的标记，就无法显示出如何做到这一点，因为您需要基本上附加事件到父容器如下：
$（＃parent_element_of_links）。delegate（。showtabinfos，click ，function（）{
$（'div.infos'）。removeClass（showtab）。addClass（hidetab）;
$（this）.parent（）信息）removeClass（hidetab）。addClass（showtab）;
}）;
编辑：
看着你的页面，我有点不清楚你有没有启用jQuery noConflict，但我认为这应该做到：
jQuery.noConflict（）;
（function（$）{
$（'a.showtabinfos'）。live（click，function（e）{
$（'div.infos'）。removeClass （hidetab）; addClass（hidetab）;
$（this）.siblings（'div.infos'）。 （）;
}）;
}）（jQuery）;
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:
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">
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);
这篇关于点击事件在Ajax加载后停止工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
