Question

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

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

到目前为止，它按预期工作。我的困境是每个新添加的html。为了澄清，我的HTML只不过是一个带有链接和隐藏跨度的div。我使用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>

现在是latest.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。

Answer 1

您需要的是event delegation，您正在追加其他页面中的内容，但在page load时无法使用，因此您必须将事件委托给具有{{1}的静态父级处理程序（在页面加载时存在，如.on()或$(document)或$('body')），所以我建议您这样做：

$('#latestinfo')

或者你可以将事件委托给所有元素的父母$("#latestinfo").on('click', '.openinfo', function(){ $(this).next('span').toggle(); });：

$(document)

旁注：

记住：委派的事件不适用于SVG。

Answer 2

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

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

详细了解on()

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

Answer 3

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

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

中

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

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

Answer 4

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

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

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

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

jQuery - 在元素中添加Div

4 个答案:

旁注：