0

そのため、div を使用して画面上にいくつかのボックスを動的に生成しようとしています。特定のボックス ( name=box1) をクリックすると、特定のコードが実行されます。それらが私のhtmlにハードコードされたとき、次のコードはうまくいきましたが、今はそれらを でラップしているので、 ではなくpへの参照として「これ」を取ります。11行目を変更する必要があると思います。pdiv

$(document).ready(function(){
  $('#swapboxes').click(function(){
        //build the box location array and boxes
        $('#boxeshere').html("");
        for(var i = 0;i < $.gameconfig.numofboxes;i++){
            $('<div class="boxes" style="background:#bf3215;height:100px;width:100px;left:'+200*i+'px;position:fixed;" name="box' + i + '" id="' + i + '"/>').appendTo('#boxeshere');
        }
  });
  //Execution for clicking on boxes
  $('.boxes').click(function(){
        if(this.attributes["name"].value == "box1"){
            $("#info").text("Congrats!!! You win!");
        }
        else{
            $("#info").text("I'm sorry, wrong box");
        }   
  });
});
4

2 に答える 2

0

クリックはボックスに留まるはずです。

問題は、＃ swapboxesがクリックされたときに.boxesがページの読み込み後に生成されることですが、.boxesがまだ存在しないときに、ページの読み込み時にボックスと呼ばれるものにクリックイベントを直接バインドしようとしました。それはうまくいきません。

新しい.on（）委任メソッドを使用すると、宣言（pageload）の時点で存在する祖先要素（この場合は、＃swapboxesのjQueryオブジェクトが既に存在します）にバインドし、ターゲットに委任します。エレメント。次に、＃swapboxesがクリックを感じると（イベントがバブルアップするため）、。boxes要素を検索し、そこでアクションを適用します。このような：

$(document).ready(function(){
    $('#swapboxes').click(function(){
        //build the box location array and boxes
        $('#boxeshere').html("");
        for(var i = 0;i < $.gameconfig.numofboxes;i++){
            $('<div class="boxes" style="background:#bf3215;height:100px;width:100px;left:'+200*i+'px;position:fixed;" name="box' + i + '" id="' + i + '"/>').appendTo('#boxeshere');
        }
    }) 
    //Execution for clicking on boxes
    //delegate from #swapboxes, which exists on page-load, to .boxes:
    .on('click', '.boxes', function(){
        if($this.attr('name') == "box1"){
            $("#info").text("Congrats!!! You win!");
        }
        else{
            $("#info").text("I'm sorry, wrong box");
        }       
  });
});
于 2012-10-05T22:46:01.643 に答える
0

ここでの問題は、イベントが新しく作成された要素に関連付けられていないことです..新しく作成された要素がまだページに存在しないためです。

このような場合、イベントを委任する必要があり、正常に動作するはずです..これを試してください

$('#boxeshere').on('click', '.boxes' ,function(){
        if($(this).prop("name") == "box1"){
            $("#info").text("Congrats!!! You win!");
        }
        else{
            $("#info").text("I'm sorry, wrong box");
        }   
  });

ここでは、ボックスの親にイベントを追加しているため、イベント バブリングのために新しい要素が追加された場合でも、新しく作成された要素がイベントに関連付けられます。

于 2012-10-05T22:46:43.873 に答える