jquery를 여러 번 클릭하면 실행됩니다.

Question

문제가 올바르게 발생했습니다. 토글 - 일부 버튼 상태입니다. 나는 jquery를 사용하여 이벤트를 클릭합니다. 그리고 긴 게시물에 대해 유감스럽게 생각하지만 문제가 어디인지 모르고 우연히보고 싶지 않습니다. 비슷한 질문을했지만 아무도 내 문제를 해결하지 못하는 것 같았습니다.

div의 렌더링 작업을 오늘 시작하고 싶습니다. 그리고 나는 그 (것)들이 행해지고있는 것처럼 보이게 토글 할 수 있고 싶다. :

function rewriteDivFromScratch() { 
    el = $("#eachday"); 

    // get the HTML divs from Handlebars templating compilation 
    // they're OK, I checked with inspector 

    // This renderes nicely, no problem here. 
    el.html(html); 
} 

<div id="eachday"> .. </div> 
    <div id="button-0" class="button"> <button class="btn btn-mini"> .. </button> </div> 
    .. 
    <div id="button-7" class="button"> <button class="btn btn-mini"> .. </button> </div> 

가 나는 클릭 버튼이 그 위와 같은 파일에 전환하기위한 이벤트 추가하십시오 rewriteDivFromScratch이 HTML에 버튼 div의 추가

{ 
    $('#currentDiv').hide(); 
    rewriteDivFromScratch(); 
    $('#eachday').show(); 
} 

$('.btn-mini').click(function(e) { 
    e.preventDefault(); 
    var el = $(e.currentTarget); // the <button /> 
    el.toggleClass('btn-inverse'); 
} 

내가 없는 toggleing 효과를 얻을 ..

는 지금, 나는 .btn 미니 클래스는 $ (..)가 시간이 없기 때문에 이런 가정합니다. 가을 실행을 클릭합니다. 내가 그렇게 같은 setInterval을을 추가하는 이유이다 : 나는 위의 마지막 코멘트에 말했듯

var intervalId; // it's global in my js file 
function rewriteDivFromScratch() { 
    ... 
    // This renderes nicely, no problem here. 
    el.html(html); 
    intervalId = setInterval(check); // this fires only once, so seems OK 
} 

var check = function() { 
    $('.btn-mini').click(function(e) { 
     e.preventDefault(); 
     var el = $(e.currentTarget); // the <button /> 

     if (el.length) 
      clearInterval(intervalId); 
     else 
      return; 

     // It executes this toggle more than **15** times per 
     // click on button.. Now, why is that? 
     el.toggleClass('btn-inverse'); 
    } 
}; 

, 내 문제는 그 부분이, 시간이 아니 고정 된 수를 여러 번 실행됩니다 있다는 것입니다 패턴 또는 무언가를 찾기 위해 리프레시마다.

위의 js 코드는 하나의 'app.js'에 있습니다.이 스크립트는 다른 스크립트와 마찬가지로 간단하게 index.html에 포함되어 있습니다.

Answer 1

은 새로운 버튼이 문서에 삽입 할 때마다도 작동하는 '위임 이벤트'에 대한 jQuery의 '라이브'를 사용 :

$('.button').live('click', function(){ 
    //button clicked 
}); 

의 작동 방식을 '라이브'의 자세한 설명은 http://api.jquery.com/live/를 참조하십시오.