Попытка создания последовательных событий on.click

Question

Я создал начальное событие click, которое создает часть изображения. Как только это запустилось, я пытаюсь создать еще одно событие click, которое будет продолжать создавать часть изображения. Как только начальное событие клика запускается, второй, который я создал, не работает. Нужен ли мне дополнительный оператор if? Вот то, что я до сих пор и есть три кадра в каждом случае на клик:

$(function() { 
    var frames = $('#animation').children(); 
    var frameCount = frames.length; 

    function startAnimation() { 
     var i = 0; 
     var animationInterval = setInterval(function() { 
     if(i > frameCount - 1) { 
      clearInterval(animationInterval); 
     } else { 
      frames[i % frameCount].style.display = "none"; 
      frames[i++].style.display = "inline"; 
     } 
     },1000); 
    } 

    $(frames[0]).on('click', startAnimation); 


    var frames1 = $('#animation1').children(); 
    var frameCount1 = frames1.length; 


    function continueAnimation() { 
     var i = 0; 
     var animationInterval1 = setInterval(function() { 
     if(i < frameCount - 1) { 
      clearInterval(animationInterval1); 
     } else { 
      frames1[i % frameCount1].style.display = "block"; 
      frames1[i++].style.display = "inline"; 
     } 
     },1000); 
    } 

    $(frames[3]).on('click', continueAnimation); 
}); 

Answer 1

Вот исправление я сделал, проверить его

... 

jsfiddle

Answer 2

Вы должны использовать функции делегата Jquery (в http://api.jquery.com/delegate/). На данный момент немного сложно предоставить вам какой-либо код - как заметил Эрджек, пример JS Fiddle был бы замечательным. Ваша проблема в основном связана с тем, как работает функция .on(), она регистрирует этот триггер только при загрузке DOM, а не для последующих изменений в DOM, это где .delegate ('event', 'target', function (event) { }); пригодится, так как позволяет программным образом присоединять события даже для последующих изменений DOM.