<script>
(function( $ ) {
$.widget( "my.dropbox", {
errorText: function(text) {
$(this.element).next().html(text);
},
_create: function() {
var id = $(this.element).attr("id");
var customDropbox = $(
"<div class='form-group'>"+
"<label for='"+id+"'>"+getLabelFor(id)+"</label>"+
"<select id='"+id+"'></select>"+
"<div class='errors'></div>"+
"</div>"
);
customDropbox.attr("id", id);
$(this.element).replaceWith(customDropbox); // This removes original element from DOM
populateOptions(id);
},
});
}( jQuery ));
$(document).ready(function(){
$("#field1").dropbox(); //blank input field turns into a select with a label, populated options e.t.c..
$("#button1").on("click", function(){
$("#field1").dropbox("errorText", "This is a validation error message"); //throws an error saying dropbox is not initialized
});
});
</script>
<html>
<body>
<input id="field1" />
<button id="button1">Press me</button>
</body>
</html>
所以我想要一个带有公共(public)方法的小部件，该方法将用与其关联的所有小部件数据替换原始元素。上面代码的问题是 <select..> element 只是一个 DOM 元素，如果你调用 .dropbox(..)在上面，它会说小部件未初始化。有没有办法用 .errorText() 方法将 select 元素变成 widget 对象？所有在线小部件示例都在原始元素周围添加内容，但从不替换它。至于更大的图景，我正在尝试制作一个通用工具来动态配置表单。这将是所有<input id="...">在 html 中，然后 javascript 将查询数据库，获取字段的配置并将其转换为 dropbox , checkbox或者说 date picker所有labels , validation , 和其他花里胡哨的东西。
最佳答案
您的小部件代码存在不止一个问题。我将尝试总结它们:
<强>1。复制数据
您没有复制 data到新创建的customDropbox , 所以之前
this.element.replaceWith(customDropbox);
你应该复制data :
customDropbox.data(this.element.data());
现在小部件将记住它已被初始化。
<强>2。 this.element 不见了
之后
this.element.replaceWith(customDropbox);
你应该更新this.element以便它指向新创建的 customDropbox :
this.element = customDropbox;
<强>3。 errorText 消息采用了错误的元素
因为 widgets 元素 ( this.element ) 现在指向 <div class='form-group'></div>元素，errorText函数必须稍微修改为:
this.element.find(".errors").html(text);
<强>4。 id 应该是唯一的
现在，包装器 <div>和 <select>具有相同的 ID，这在 HTML 中是不允许的，因此删除 <select> 上的 ID标签。幸运的是，<label>可以在没有 for 的情况下工作属性，这样写就可以了:
<label>labelForId <select></select></label>
然后得到<select> - 元素，使用 this.element.find("select")在小部件中。
旁注
`this.element` is already a jQuery element, so no need for the additional `$()` wrapping.
查看此 jsFiddle
关于javascript - 用新构造的 DOM 结构替换小部件元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20560551/