0

因此，我尝试使用 div 在屏幕上动态生成一些框，当您单击特定的框（name=box1）时，它会执行某些代码。当它们被硬编码到我的 html 中时，以下代码工作正常，但现在因为我将它们包装在 a 中p，所以它需要 'this' 作为对pnot 的引用div。我相信它的第 11 行需要改变。

$(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

点击应该停留在方框上。

问题是 .boxes 是在页面加载后生成的，当点击#swapboxes 时，但是当 .boxes 尚不存在时，您尝试将点击事件直接绑定到页面加载时称为 box的东西。那是行不通的。

使用新的 .on() 委托方法，您绑定到在声明（页面加载）时存在的祖先元素（在这种情况下，您已经为 #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 回答