Question

所以我试图使用div在屏幕上动态生成一些框，当你点击一个特定的框（name=box1）时，它会执行某些代码。当他们被硬编码到我的html中时，以下代码工作正常，但现在因为我将它们包装在p中，所以需要'this'作为对p而不是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");
        }   
  });
});

Answer 1

点击应保留在方框上。

问题是在页面加载后，当单击#swapboxes时，会生成.box，但是您尝试将click事件直接绑定到名为的框的< / em>页面加载，当.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"); } }); });

Answer 2

这里的问题是事件没有附加到新创建的元素上。因为新创建的元素仍然不存在于页面上。

在这种情况下，你需要委托事件，它应该工作正常。试试这个

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

这里我们将事件添加到框的父级，因此即使由于事件冒泡而添加了新元素，新创建的元素也将与事件相关联。

在包含在另一个元素中的特定元素时引用它

2 个答案: