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 に答える