Question

基本上，我尝试编写以下代码。（请注意，我是jQuery的新手，正在努力学习。）

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

<style>
    img.box:hover { opacity: 0.4; }
</style>

<script type="text/javascript">
jQuery(document).ready(function() 
{
  $(".box").click(function(event){
      $.post("./itemdrop.php", { id: "Item:1" }, function(data){
            $('#box').append(data);
         }
      );
  });

  $("li").click(function(event){
     $(".box").append("clicked");

  })
});
</script>
</head>

<body>

<div id="box">
    <img class="box" src="./img/box.jpg" width="150" height="150">
</div>

</body>
</html>

它应该像这样工作：

用户点击“box”图片，jQuery从itemdrop.php获取值

返回的值为<li class="item">Shield of Walmar</li>

然而，当我点击Shield of Walmar时，jQuery不起作用。（我不知何故感觉顶部的文档就绪功能导致它。）

我该如何解决这个问题？

Answer 1

您需要使用直播活动/代表。由于您使用的是最新的jQuery版本，因此您需要使用.on()：

$('#box').on('click', 'li', function(event){
     $("#box").append("clicked");
});

我还建议您将jQuery(document).ready(function()替换为jQuery(document).ready(function($) - 否则该函数内的$仅在全局可用时才有效（即$.noConflict未使用）

Answer 2

使用on()：

$("#box").on('click', 'li', function(event){
   $(".box").append("clicked");
})

引用文档：

委派事件的优势在于它们可以处理来自的事件后代元素稍后添加到文档中。通过选择一个保证在当时存在的元素委托事件处理程序附加，您可以使用委托事件避免频繁附加和删除事件处理程序。

来自ajax的返回值的函数？

2 个答案: