DOM加載後添加的複選框上的複選框單擊事件

我想在複選框數組上激發一個事件。問題是，我相信，僅僅因爲在DOM第一次加載JavaScript事件處理程序後添加了這些複選框，事件處理程序在單擊它們時無法觸發這些新複選框。DOM加載後添加的複選框上的複選框單擊事件

這是我的代碼：

//this runs after the initial load of the page. 
var fillSeries = function() { 
    $.getJSON('api/series', function(data) { 
    var result = ''; 
    for(var i = 0; i < data.length; i++) { 

     //the first result is structure. 
     if(i == 0) 
      continue; 

     var tablerow = '<tr><td><input type="checkbox" class="showarray" value="'+ data[i].id +'" /> ' + data[i].title + '</td></tr>'; 
     result += tablerow; 
    } 
    $('#series-table').append(result); 
    // remove the loading icon and text 
    $('#loading').remove(); 
}); 
} 
// checkbox onclick listener 
$('.showarray').click(function() { 
    console.log($(this).val()); 
});

我怎樣才能使事件火？

來源

2013-02-17 Ms01

'$（ '＃系列表'）上（。 'click'，'.showarray'，function（）{...}）''再次!!!! – adeneo 2013-02-17 17:57:32

嘗試連接您的回調中的事件偵聽器，追加新的內容之後：
所以不是這樣的：$('#series-table').append(result);，嘗試：

$('#series-table').append(result).find('.showarray').click(function(e) { 
    console.log($(this).val()); 
});

來源

2013-02-17 18:00:41

謝謝，這個作品很棒。我試圖在之前添加它，但我做錯了:) – Ms01 2013-02-17 18:03:53

如果這是正確的，問題是元素被動態地添加到頁面加載後的DOM的結果，請嘗試使用：

$(document).on('click', '.showarray', function() { 
    console.log($(this).val()); 
});

這將處理單擊所有元素的事件與showarray的類名，甚至如果在頁面加載後動態添加。

編輯：看起來你已經得到了它的工作，但我爲了完整性而修復了我的答案。 .on（）需要與一個父元素關聯到正在討論的元素，而實際選擇器被分配給處理程序的是第二個參數。

來源

2013-02-17 17:58:38 squeezebox

嗯這不適合我：/ – Ms01 2013-02-17 18:02:27

DOM加載後添加的複選框上的複選框單擊事件

回答

相關問題