0

我有一个单击事件，用于$.ajax调用服务器以获取一些更新的 html（来自我的数据库）。

div然后，我使用该方法将该 html 放在一个特定的 中.append()，从而保留里面已经存在的内容。

到目前为止，它按预期工作。我的困境是每个新附加的html。澄清一下，我的 html 只不过是一个带有链接和隐藏跨度的 div。我使用toggle()隐藏跨度的链接，它的内容。
Toggle 不起作用，因为 click 事件没有监听新附加的 html。

我确信这很容易补救，但直到现在我才需要深入研究。

所以，这是第 1 页的代码：

<div id="latestinfo">

  <div class="info">
    <a href="javascript:void(0)" class="openinfo">View This</a>
    <span style="display:none">Latest story on something</span>
  </div>
  <div class="info">
    <a href="javascript:void(0)" class="openinfo">View This</a>
    <span style="display:none">Latest story on something</span>
  </div>

</div>

<a href="javascript:void(0)" id="grabmoreinfo">Call Server for More</a>


<script language="javascript" type="text/javascript">
$(document).ready(function(){

  $(".openinfo").click(function(){  
   $(this).next('span').toggle();
  });


  $("#grabmoreinfo").click(function(){  
    $.ajax({ 
            url: "latest.php",
            data:"formId=grabmore",
            success:function(data){  $("#latestinfo").append(data); }      
    }); 
  });

});
</script>

现在最新的.php：

<?php

$var = '
<div class="info">
    <a href="javascript:void(0)" class="openinfo">View This</a>
    <span style="display:none">Another story on something</span>
  </div>
';

echo $var;

?>

因此，总而言之，这些append()工作就像一个魅力，而该click()方法没有注意到新附加的 html。

4

4 回答 4

1

您需要的是event delegation，您正在附加来自其他页面的内容并且它在当时不可用，page load因此您必须将事件委托给带有.on()处理程序的静态父级（在页面加载时存在，如$(document)or$('body')或$('#latestinfo')），所以我建议你这样做：

$("#latestinfo").on('click', '.openinfo', function(){  
   $(this).next('span').toggle();
});

或者您可以将事件委托给$(document)作为所有元素的父级的事件：

$(document).on('click', '.openinfo', function(){  
   $(this).next('span').toggle();
});

边注：

请记住：委托事件不适用于 SVG。

于 2013-04-16T05:37:17.390 回答
0

对动态生成的元素使用on委托事件...

  $("#latestinfo").on('click',".openinfo",function(){  
   $(this).next('span').toggle();
  });

阅读更多关于on()

在 ajax 的成功函数中调用 click 函数也可以，但我更喜欢使用 on委托事件。

于 2013-04-16T05:33:03.963 回答
0

在定义处理程序时，将事件处理程序附加到尚未在 DOM 中的内容时，您必须使用“on”

标准的“CLICK”假定元素已经存在于 DOM 中

$("#latestinfo").on("click",".openinfo",function(){  
   $(this).next('span').toggle();
  });

看起来您可以将 latestinfo 用作“父级”

于 2013-04-16T05:33:48.050 回答
-1

如果您使用的旧版本的 jQuery.live()仍然有效，您可以通过将代码更改为以下代码来快速运行您的代码

$(".openinfo").live('click',function(){  
   $(this).next('span').toggle();
});

但是，如果您使用较新的 jQuery 版本，1.9.1我建议您使用.on()方法，因为许多其他答案都建议在页面加载后附加的元素上绑定事件。

注意：我推荐.on()它，因为它会使您的代码面向未来，但.live()可以作为您的临时解决方法。另请注意，.live()在较新的 jQuery 版本中已弃用。

于 2013-04-16T05:53:28.993 回答