0

基本上，我尝试编写以下代码。（请注意，我是 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>

它应该像这样工作：

  1. 用户点击“盒子”图像，jQuery 从 itemdrop.php 获取值

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

但是，当我单击 Shield of Walmar 时，jQuery 不会起作用。（我不知何故有一种感觉，顶部的文档准备功能会导致它。）

我该如何解决这个问题？

4

2 回答 2

2

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

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

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

于 2012-04-21T19:11:38.747 回答
1

使用on()：

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

引用文档：

委托事件的优点是它们可以处理来自以后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委托事件来避免频繁附加和删除事件处理程序的需要。

于 2012-04-21T19:13:08.983 回答