新增元素使用delegate() won't bind jscolor.js
Newly added elements using delegate() won't bind jscolor.js
我有一个简单的表单,其中每行由3个输入字段组成。在其中一个字段上,我使用jscolor.js(字段有一个class="color"
,因此绑定了JS)。
然而,当我使用jQuery的delegate()
添加新行时,输入字段不绑定JS,预期的功能不存在。http://jsfiddle.net/alexwald/qARzP/
<script>
var line = '<li class="form_line" id="line">
<span>
<label for="item">Item:</label>
<input type="text" required="required" placeholder="what item is this?" id="item" name="item[]>
</span>
<span>
<label for="amount">Amount: </label>
<input required="required" type="number" id="amount" name="amount[]>
</span>
<span>
<label for="color">Color: </label>
<input type="text" required="required" class="color {pickerClosable:true, hash:true ,pickerFace:3,pickerBorder:0}" id="color" name="color[]">
</span>
</li>';
$(document).ready(function() {
$("form").delegate(".add", "click", function(){
$('ul').append(line);
}); // end of adding
}); //end of main func
</script>
我认为问题在:
- 如何定义
line
变量,或 - 我使用一个不合适的选择器与
.delegate
,所以它应该是别的东西,而不是form
..?
感谢您的帮助。
你的代码有几个问题:
-
你在你的"line"变量中使用id。ID在HTML文档中必须是唯一的。您最好使用名称属性,或者创建不同的新行,以便您可以更改id。
-
为什么要将'click'事件委托给'Add'按钮?事件委托用于自动将事件"绑定"到动态创建的元素。在你的例子中,"添加"按钮,是静态的页面,你不需要使用委托,只需。click()或。bind()。
-
创建新行后,必须在新字段上显式初始化jscolor,这不会自动发生。当你的页面第一次被解析时,现有的
<input class="color" />
被jscolor插件初始化,但是之后插入的元素不再初始化,脚本已经运行了。
下面是一些修改后的代码:
<script>
var line = '<li class="form_line" id="line"><span><label>Item:</label><input type="text" required="required" placeholder="what item is this?" name="item"></span><span><label>Amount: </label><input required="required" type="number" name="amount"></span><span><label>Color: </label><input type="text" required="required" class="color {pickerClosable:true, hash:true ,pickerFace:3,pickerBorder:0}" name="color"></span></li>';
$(document).ready(function() {
var $ul = $('#formulario'); // the UL, select it once and r-use this selection
$('.add').click(function(e) {
var $line = $(line);
$line.appendTo($ul);
// initialize the new jscolor instance
new jscolor.color($line.find('input[name=color]')[0], {});
});
}); //end of main func
</script>
您可以通过在append事件中重新初始化jscolor对象来解决这个问题。
$("body").on('click', 'div .add', function(){
$("#some-id").append('<input type="text" name="color" class="color">');
new jscolor.init();
});
我没有别的办法了。
以下解决方案适用于我。
通过在javascript中传递输入元素对象创建新的jscolor对象。
var picker = new jscolor($li.find('.jscolor')[0]);
参考http://jscolor.com/examples/转到实例化新的颜色选择器一节。
相关文章:
- Vue.js-插值错误-如何将样式修改为v-bind:style
- 如何防止bind在使用async.series时更改node.js中的原始对象
- Angular ng-bind-html - 阻止执行JS代码
- 尝试在node.js上模拟function.bind()
- Angular.js:如何使用ng-bind来显示concat.数组的元素作为字符串
- ng-bind-html and highlight.js
- 何时在JS中使用.bind()
- 在BIND之后调用JS函数
- Angular.js取消bind()事件中的$http请求
- 在javascript或node.js中是否有等价的std::bind ?
- 新增元素使用delegate() won't bind jscolor.js
- 使用这个/bind的JS原型作用域
- 在JS中是否有任何方法来'bind'一个变量状态的函数
- Ember js将id传递给bind-attr
- 无法读取property 'bind'的定义.React.js
- Less.js + IE8 =对象不支持属性和方法'bind'
- 在backbone.js中使用bind传递上下文
- 在Ember.js中创建模板的Bind函数
- 不能通过.bind (JS)传递数据
- knockout js data-bind child in object