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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (105)

我在运行时生成一些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时,其中的输入元素无法按预期工作。如何在动态生成的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承诺的解决方案。这是小提琴

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();
    });
});

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

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励