jQuery，腳本無法識別新添加的元素

Question

我有一個簡短的腳本，用於設置單選按鈕的樣式。 檢查工作示例http://jsfiddle.net/YJRsk/ 。

當DOM中已經存在單選按鈕時，這非常有用。 因此，在頁面加載時，它們的樣式正確。

問題是當我通過添加單選按鈕動態添加單選按鈕時，腳本無法識別它們，因為它已在頁面加載時運行。 因此，由於這個原因，我得到一個錯誤Uncaught TypeError：無法讀取null的屬性'style'。 我該如何解決這個問題，以便新添加的收音機可以在現場自動設置樣式，而不必保存和刷新頁面。 我嘗試在每次添加廣播后運行腳本，但這沒有用。

var item = '<li><input type="radio" value="'+uniqid()+'" class="styled" name="test"/><label class="radioButton">Radio button</label></li>';
$('button').live('click', function() {
    $(item).appendTo('#radio');
})

檢查jsfiddle示例，然后單擊“添加單選”按鈕進行測試。

Answer 1

使用CSS規則，並將類添加到所有單選按鈕。 如果您使用高級jQuery選擇器進行樣式設置，則建議您在創建每個新元素時簡單地應用該樣式設置功能。

編輯：這里的基本問題是您的.js文件是在頁面加載時加載的，因此，如果您使用類似以下內容的文件：

$(".mybutton").click(function() {
    alert("test");
});

此事件將僅“添加到”頁面加載時存在的.mybutton元素上。 如果動態創建/添加元素，則必須再次將上述事件處理程序分配給它們。

這還會產生影響，您的uniqid()函數將為當前添加的所有單選按鈕創建相同的ID。 改為這樣做：

$('button').live('click', function() {
    var item = '<li><input type="radio" value="'+uniqid()+'" class="styled" name="test"/><label class="radioButton">Radio button</label></li>';
    $(item).appendTo('#radio');
})

編輯2：

我不知道您的單選按鈕使用什么jQuery樣式，但是基本思想是每次都在新創建的按鈕上使用樣式功能。 看到這個小提琴： http : //jsfiddle.net/YJRsk/11/

如果我仍然缺少某些東西，請詳細說明並向我們展示您用於單選按鈕樣式的jQuery。

Answer 2

如果您知道單選按鈕的最大數量，這就是我要做的：

1. 在表單中添加最大數量的單選按鈕（僅顯示您不想在一開始顯示的按鈕）

2. 留下腳本樣式

3. 單擊按鈕時，僅逐一顯示已樣式化的單選按鈕

我希望我足夠清楚。

Answer 3

您忘了在Javascript中添加一段HTML代碼。

var item = '<li><span class="radio" style="background-position: 0pt 0pt;"></span><input type="radio" value="'+uniqid()+'" class="styled" name="test"/><label class="radioButton">Radio button</label></li>';

$('button').live('click', function() {
    $(item).appendTo('#radio');
})

http://jsfiddle.net/YJRsk/3/

也就是說，使用CSS設置單選按鈕的樣式可能是一個更明智的主意