在动态生成的HTML上使用插件

Using a plugin on dynamically generated HTML

本文关键字：插件 HTML 动态      更新时间：2023-09-26

我正在运行时生成一些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元素具有插件的所有功能，但当我在Testdiv中添加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>

我选择了使用jQuery promise的解决方案。这是Fiddle

HTML（你的基本副本）：

<input type="text" class="SomeClass">
<div id="Test"></div>

Javascript：

$.fn.SomePlugin = function(){
    $(this).val("plugin activated");
}
function Start() {
    alert('hi from start');
         $('#Test').html('<input type="text" class="SomeClass">');
    return $.when();
}
$(document).ready(function(){  
    Start().then(function () {
        alert('hi from done');
        $(".SomeClass").SomePlugin();
    });
});

我对$（Start）有一些问题，所以我选择了document.ready方法。唯一真正的区别是Start返回$.when（SO Post Here），而我在调用开始后加上一个'then'。这允许页面进行设置，然后您可以运行所需的任何插件，并确保在插件尝试操作它们之前，所需的元素已在DOM中。

相关文章：