Question

在这个脚本中，目标是在单击#packet时附加/生成元素'#sauce'，然后再次单击#packet'触发'。

到目前为止，脚本会创建fires然后创建一个新的'#sauce'，但是新的'#sauce'没有绑定到函数fireA（）。

所以.on（'click'应该运行我认为的两个函数 - 首先触发#sauce并将一个新的#sauce附加到#saucebox，这将成为再次点击触发的下一个元素...基本上是弹药重载：）

    $(document).ready(function() 

    {


$("#rip_tab").click(function () {
      $(this).toggleClass("rip_tab_ripped");
    });  


function fireA() { $("#sauce").removeClass("sauceWait").switchClass("sauce_hide", "sauce1", 200).switchClass("sauce1", "sauce2_fall", 400);}


    $('#packet').on('click', function() {
if ($('#rip_tab').hasClass("rip_tab_ripped")) 

    {       

   var events = [fireA];

   //declare counter
   if(!this.counter) { this.counter = 0; }

   events[this.counter]();
   this.counter = (this.counter + 1) % 3;

}

    });


$(document).on('click','#packet', function () {
$('#saucebox').append('<div id="sauce" class="sauce1 sauce_hide sauceWait sq1"></div>');
$fireA();
});

  });

如果我使用初始的'#sauce'它会正确触发并生成另一个'#sauce'，但是新的#sauce不会绑定到函数fireA（）

<div id="saucebox">
<div id="sauce" class="sauce1 sauce_hide sauceWait sq1"></div>
</div>

如果没有初始的'#sauce'，则会正确生成另一个'#sauce'，但同样，新的#sauce不会绑定到函数fireA（）

<div id="saucebox">
<div id="sauce" class="sauce1 sauce_hide sauceWait sq1"></div>
</div>

Answer 1

您不能在文档中多次使用相同的ID。您必须选择不同的ID或使用其他选择器。 #sauce使用document.getElementById，只会选择第一个。 [id=sauce]应该选择两者，尽管从DOM的角度来看仍然是错误的。

jQuery将新的.append元素绑定到函数

1 个答案: