Question

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>

Answer 1

You can’t use the same ID more than once in a document. You have to pick a different ID or use some other selector. #sauce uses document.getElementById, which will only select the first one. [id=sauce] should select both, though it is still wrong from a DOM perspective.