將函數應用到動態內容javascript/jquery

好吧，我試圖通過更改元素的id並將兩個不同的函數應用到不同的id來啓動/停止setInterval函數。這裏是目前的代碼：將函數應用到動態內容javascript/jquery

$(document).ready(function(){ 
    var seq 
    $('#start').click(function(){ 
    $(this).attr('id','stop'); 
    seq=self.setInterval(function(){blah()},125); 
    }); 
    $('#stop').click(function(){ 
    $(this).attr('id','start'); 
    clearInterval(seq); 
    }); 
});

當我點擊＃開始元素時，setInterval的開始和ID更改#stop的，但如果我再次點擊（現在叫＃停止的元素），代碼爲＃開始進行（另一個setInterval的加入）感謝

功能「嗒嗒」只是一個當你說一個由功能

來源

2013-05-17 Hello World

哪裏是你的'beat'功能？ – phenomnomnominal

這些事件掛鉤不適用於動態內容，因爲jQuery正在爲第一次加載時存在的元素構建事件池。動態內容在document.ready之後。你爲什麼要改變ID呢？除非你真的必須這樣做，這通常是不好的做法。 – CP510

事件不會在id更改時奇蹟般重新綁定。您最好只綁定一個事件處理程序，然後使用'if'塊來確定它處於哪個狀態。 –

的例子：

$('some selector').click(...

將點擊處理程序綁定到當時匹配的所有元素some selector - 它不會自動應用於將來可能與其匹配的元素。

爲了使處理程序適用於選擇在你需要使用委派的事件處理程序，這意味着處理器連接到父元素click事件的時間相匹配的元素（或document如果元素沒有靜態父）：

$(document).ready(function(){ 
    var seq 
    $(document).on('click', '#start', function(){ 
     $(this).attr('id','stop'); 
     seq=self.setInterval(function(){blah()},125); 
    }); 
    $(document).on('click', '#stop', function(){ 
     $(this).attr('id','start'); 
     clearInterval(seq); 
    }); 
});

的.on() method允許您將取決於你傳遞給它的參數「正常」非委託處理或委託處理。

的另一種選擇是不更改ID，只需使用一個測試以某種方式當前狀態的一次點擊處理程序：

$(document).ready(function(){ 
    var seq; 
    $('#start').click(function(){ 
    if (seq) { 
     clearInterval(seq); 
     seq = null; 
    } else 
     seq=self.setInterval(function(){blah()},125); 
    }); 
});

來源

2013-05-17 22:22:16 nnnnnn

拼寫錯誤'docoment' .. :) – bipen

Thanks @bipen。固定。 – nnnnnn

第二種解決方案更好，但你確定它不應該說seq = false？我現在還不確定seq = null是否足夠... – m7o

我不會改變的ID，因爲這不會改變事件綁定。你通常不應該改變一個元素id標籤。更好的計劃（至少對我來說）是將其設置爲一個班級。然後使用html數據標籤來決定狀態。

<button type="button" class="buttonClass" data-state="start">Button Text</button>

$(document).ready(function(){ 
    var seq 
    $('.buttonClass').click(function(){ 
    var state = $(this).data('state'); 
    if(state=='start') { 
     //do start interval stuff 
     seq=self.setInterval(function(){blah()},125); 
     $(this).data('state','stop'); //Change the state now 
    } else if(state=='stop') { 
     //do stop interval stuff 
     clearInterval(seq) 
     $(this).data('state','start'); //Change the state again 
    } 
    }); 
});

來源

2013-05-17 22:26:06 CP510

這樣比我的解決方案更好，因爲使用數據屬性而不是類... – m7o

如果您使用現有的'seq'變量作爲狀態指示器（請參閱我的答案），它可以變得更簡單。 – nnnnnn

沒錯，那好多了。 upvoted它。 – m7o

你爲什麼不只是檢查像這樣的狀態（無需事件偵聽器添加到文件）：

$(document).ready(function(){ 
    var seq; 
    $('#start').on('click', function(){ 
     if(!$(this).hasClass('running')){ 
      seq=self.setInterval(function(){blah()},125); 
      $(this).addClass('running'); 
     } 
     else{ 
      $(this).removeClass('running'); 
      clearInterval(seq); 
     } 
    }); 
});

來源

2013-05-17 22:27:33 m7o

將函數應用到動態內容javascript/jquery

回答

相關問題