Question

我是jquery的新手，我遇到了一个有点奇怪的问题。在jquery中创建div之后，我无法使用它，这个例子会告诉你问题是怎么回事！让我们假设在get.php页面中只有：echo“test test”; 我文件中的代码：

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
  $("#bda").click(function()
{
$.post("get.php",function(data){
$("#tdiv").append('<div class="info" >'+data +'</div>');
});     
});

$(".info").click(function()
{
  alert("done");
});
});
</script>     
</head>

<body>
 <div id="bda">click here</div>
 <div align="center" style="border:1px solid blue" id="tdiv">    
  example
 </div>
<div class="info" >it works here</div>

有人可以帮助我......

Answer 1

jQuery对$(".info")做什么是在你调用它时选择.info元素 - 这只是一个元素，因为后一个元素被添加（通过ajax）。因此，其他元素没有附加点击事件。因此，.info选择器实际上并未保存 - 仅将元素从文档中拉出，然后丢弃选择器。

当你点击时，你想要的是jQuery在选择器上检查元素。你可以通过事件委派来做到这一点：

// When you click somewhere in the body, jQuery will check whether you // clicked on a `.info` element and execute the function in that case. // This also works for elements added later on. $("body").on("click", ".info", function() { ... });

Answer 2

当您向DOM插入新元素时，您应该委派事件：

$("body").on('click', '.info', function() {
  alert("done");
});

Answer 3

在执行脚本时将click事件绑定到info类，但是稍后在ajax过程中添加新div。你必须将click事件重新分配给这个类

尝试不与.click（）绑定，改为使用.on（），如下所述：http://api.jquery.com/on/

$("body").on('click', '.info', function() {
  alert("done");
});

无法使用jquery创建的元素

3 个答案: