jQuery的全局插件實例

很抱歉的壞稱號，但我有類似下面的代碼jQuery的全局插件實例

$('[data-value]').each(function() { 
      var $this = $(this); 
      $this.val($this.data('value')); 
});

與

<select data-value="14:00"> 
    <option>12:00</option> 
    <option>13:00</option> 
    <option>14:00</option> 
    <option>15:00</option> 
</select>

的目標是在輕鬆前選擇「數據值」列表。

除了在頁面初始化之後添加select元素時，代碼完美工作。

例如，這將不起作用

$('body').append('<select data-value=yellow><option>black</option><option>yellow</option><option>red</option></select>');

所以，我怎樣才能使它即使在工作的時候在頁面初始化之後添加DOM元素？

感謝

來源

2012-07-13 BenoitD

您必須在追加到dom後再次運行此命令。 – 2012-07-13 09:01:35

我知道，但我想要更普遍的東西。因此，當我向DOM添加某些內容時，代碼應該自行觸發。也許我應該圍繞身體或文檔上的事件包裝代碼，但我不知道哪一個。 – BenoitD 2012-07-13 09:05:02

好了，所以你可以使用類似：

它檢查是否有新的選擇元素，如果發現有些沒有「處理」類，它處理他們。

function checkNewSelects() { 
    $('select').not(".processed").each(function() { 
     var $this = $(this); 
     $this.val($this.data('value')); 
     $this.addClass('processed'); 
    }); 
    setTimeout(checkNewSelects, 300); 
} 
setTimeout(checkNewSelects, 300);

來源

2012-07-13 09:09:01

'setInterval'可能是一個更好的主意。 – Inkbug 2012-07-13 09:12:19

@Inkbug不是。使用setTimeout可以確保checkNewSelects等待，直到完成一次運行才執行新的運行。使用setInterval檢查可能會在較慢的PC上執行多次。 – 2012-07-13 09:17:32

這是一個很好的解決方案，但它會檢查頁面事件，如果沒有新的附加。我發現'DOMSubtreeModified'事件，也許我們可以用它做點什麼。 – BenoitD 2012-07-13 09:27:54

jQuery的全局插件實例

回答

相關問題