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的全局插件实例

回答

相关问题