blocks|key|14982|text|为了让插件与新创建的元素一起工作，您需要在这些元素上初始化插件才能正常工作。有几种方法可以做到这一点，比如在添加新元素时再次调用它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|14983|如果你只是想避免修改和添加代码，你可以覆盖jquery+html来检查你是否正在添加一个带有SomeClass的元素，并自动调用它的插件：|14984|​|14985|(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);|code-block|syntax|javascript|14986|<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>|14987|14988|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|S|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|H|7|T|8|@]|9|@]|A|$I|J]]|$1|M|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>For plugin to work with new created elements, you need to init the plugin on those elements for it to work. There are several ways to do this, such as calling it again when new elements are added. </p>

<p>If you just want to avoid changing your code and adding that, you could override jquery html to check if you are adding an element with SomeClass and call the plugin for it automatically:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>(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 &lt;br/&gt;");
    }

    function Start() {

      setTimeout(function() {

        $('#Test').html('&lt;input type="text" class="SomeClass"&gt;');
        $('#Test').html()

      }, 1000);
    }

    $(".SomeClass").SomePlugin();

    $(Start);</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;input type="text" class="SomeClass"&gt;
&lt;div id="Test"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4522686|text|我选择了一个使用jQuery承诺的解决方案。这是Fiddle|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4522687|HTML+(您的基本副本)：|4522688|<input+type="text"+class="SomeClass">
<div+id="Test"></div>|code-block|syntax|javascript|4522689|Javascript：|4522690|$.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();
++++});
});|4522691|我对$(Start)有一些问题，所以我选择了document.ready方法。唯一真正的区别是start返回$.when+(SO+Post+Here)，并且我在调用Start之后链接了一个'then‘。这允许设置页面，然后您可以运行所需的任何插件，并确保在插件尝试操作所需的元素之前，DOM中已经包含了所需的元素。|4522692|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/jasonwilczak/vdmpfabs/|1|https://stackoverflow.com/questions/16026942/how-do-i-chain-three-asynchronous-calls-using-jquery-promises^0|O|6|0|0|0|0|0|0|1P|E|1|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@$A|11|B|12|1|13]]|C|$]]|$1|D|3|E|5|6|7|14|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|15|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|16|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|17|8|@]|9|@]|C|$I|J]]|$1|O|3|P|5|6|7|18|8|@]|9|@$A|19|B|1A|1|1B]]|C|$]]|$1|Q|3|-4|5|6|7|1C|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]|Y|$5|T|U|V|C|$W|Z]]]]

<p>I opted for a solution that used jQuery promises.  Here is the <a href="http://jsfiddle.net/jasonwilczak/vdmpfabs/" rel="nofollow noreferrer">Fiddle</a></p>

<p>The HTML (basic copy of yours):</p>

<pre><code>&lt;input type="text" class="SomeClass"&gt;
&lt;div id="Test"&gt;&lt;/div&gt;
</code></pre>

<p>The Javascript:</p>

<pre><code>$.fn.SomePlugin = function(){
    $(this).val("plugin activated");
}

function Start() {

    alert('hi from start');
         $('#Test').html('&lt;input type="text" class="SomeClass"&gt;');

    return $.when();
}

$(document).ready(function(){  
    Start().then(function () {
        alert('hi from done');
        $(".SomeClass").SomePlugin();
    });
});
</code></pre>

<p>I had some issue with the $(Start) so i opted for the document.ready approach.  The only real difference is that Start returns $.when <a href="https://stackoverflow.com/questions/16026942/how-do-i-chain-three-asynchronous-calls-using-jquery-promises">(SO Post Here)</a> and I chain a 'then' after the call to start.  This allows the page to setup and then you can run any plugins that you want and ensure that the required elements are in the DOM before the plugin attempts to manipulate them.</p>


<p>I'm generating some HTML at runtime and I'm wondering how to make a plugin work on the newly created HTML. I've got something that looks llike this:</p>

<pre><code>&lt;input type="text" class="SomeClass"&gt;
&lt;div id="Test"&gt;&lt;/div&gt;

&lt;script&gt;

    function Start() {

        setTimeout(function () {

            $('#Test').html('&lt;input type="text" class="SomeClass"&gt;');

        }, 1000);       
    }

    $(".SomeClass").SomePlugin();

    $(Start);

&lt;/script&gt;
</code></pre>

<p>The input element has all the functionalities of the plugin but when I add the HTML inside the Test div the input element inside there doesn't work as expected. How can I use the plugin on dynamically generated HTML? </p>


Using a plugin on dynamically generated HTML

jQuery

我正在运行时生成一些HTML，我想知道如何使插件在新创建的HTML上工作。我得到了像这样的东西：<input type="text" class="SomeClass"><div id="Test"></div><script>    function Start() {        setTimeout(funct...

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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