0

In this script, the goal is for an element '#sauce' to be appended/generated when clicking the #packet and then 'fired' on click of the #packet again.

So far the script creates fires and then creates a new '#sauce', however the new '#sauce' is not binding to the function fireA().

So .on('click' should be running two functions I think- first to fire the #sauce and to append a new #sauce to #saucebox which will become the next element fired by click again...basically ammo reload :)

    $(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();
});

  });

If I use an initial '#sauce' it fires and generates another '#sauce' correctly, but the new #sauce doesn't bind to function fireA()

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

And without an initial '#sauce' click generates another '#sauce' correctly, but again, the new #sauce doesn't bind to function fireA()

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

1 に答える 1

0

ドキュメント内で同じ ID を複数回使用することはできません。別の ID を選択するか、他のセレクターを使用する必要があります。 #sauce最初document.getElementByIdのものだけを選択します。 [id=sauce]両方を選択する必要がありますが、DOM の観点からはまだ間違っています。

于 2012-07-27T23:59:07.170 に答える