jQuery는 새로운 .append 요소를 함수에 추가합니다.

Question

이 스크립트에서는 #packet을 클릭했을 때 '#sauce'요소를 추가/생성하고 #packet 클릭시 다시 '실행'하는 것이 목표입니다.

지금까지 스크립트는 화재를 생성 한 다음 새로운 '# 소스'를 생성하지만 새로운 '# 소스'는 fireA() 함수에 바인딩되지 않습니다.

그래서. ('클릭'은 #Sauce를 실행하고 #saucebox에 새로운 #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()가

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

fireA을 기능 결합하지 않는를 사용하는 경우

처음 '#sce'클릭이 없으면 다른 '#sce'가 올바르게 생성되지만 새로운 #sce는 다시 생성되지 않습니다. 함수에 바인딩하십시오.

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

Answer 1

문서에서 동일한 ID를 두 번 이상 사용할 수 없습니다. 다른 ID를 선택하거나 다른 선택기를 사용해야합니다. #sauce은 document.getElementById을 사용하며 첫 번째 매개 변수 만 선택합니다. [id=sauce]은 둘 다 선택해야하지만 DOM 관점에서는 여전히 잘못입니다.