我正在运行时生成一些 HTML,我想知道如何使插件在新创建的 HTML 上工作。我有一些看起来像这样的东西:
<input type="text" class="SomeClass">
<div id="Test"></div>
<script>
function Start() {
setTimeout(function () {
$('#Test').html('<input type="text" class="SomeClass">');
}, 1000);
}
$(".SomeClass").SomePlugin();
$(Start);
</script>
input 元素具有该插件的所有功能,但是当我在 Test div 中添加 HTML 时,其中的 input 元素无法按预期工作。如何在动态生成的 HTML 上使用该插件?
最佳答案
为了使插件能够使用新创建的元素,您需要在这些元素上初始化插件才能使其工作。有多种方法可以做到这一点,例如在添加新元素时再次调用它。
如果您只是想避免更改代码并添加该代码,您可以覆盖 jquery html 以检查是否使用 SomeClass 添加元素并自动为其调用插件:
(function($)
{
var oldhtml = $.fn.html; //store old function
$.fn.html = function() //override html function
{
var ret = oldhtml.apply(this, arguments); // apply jquery html
if(arguments.length){
if(ret.find(".SomeClass").length){
ret.find(".SomeClass").SomePlugin(); // call plugin if the html included an element with .SomeClass
}
}
return ret;
};
})(jQuery);
$.fn.SomePlugin = function() {
$("body").append("plugin activated <br/>");
}
function Start() {
setTimeout(function() {
$('#Test').html('<input type="text" class="SomeClass">');
$('#Test').html()
}, 1000);
}
$(".SomeClass").SomePlugin();
$(Start);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="SomeClass">
<div id="Test"></div>
关于javascript - 在动态生成的 HTML 上使用插件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29264037/