在动态生成的HTML上使用插件
在动态生成的HTML上使用插件
提问于 2015-03-26 02:47:37
我正在运行时生成一些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上使用该插件？
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-03-26 03:16:47
为了让插件与新创建的元素一起工作，您需要在这些元素上初始化插件才能正常工作。有几种方法可以做到这一点，比如在添加新元素时再次调用它。
如果你只是想避免修改和添加代码，你可以覆盖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>
Stack Overflow用户
发布于 2015-03-26 04:19:01
我选择了一个使用jQuery承诺的解决方案。这是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)，并且我在调用Start之后链接了一个'then‘。这允许设置页面，然后您可以运行所需的任何插件，并确保在插件尝试操作所需的元素之前，DOM中已经包含了所需的元素。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29264037
复制相关文章
相似问题