jquery 克隆并添加事件
jquery clone and add event
我正在尝试克隆一个 "div" 以及其中的所有内容,但是其中一个事件在克隆的 div 中消失了(我对网络开发还很陌生,所以...我 "cloned" 在 SO 上找到的代码)。
缺少的事件添加如下 javascript:
var MyClass = document.querySelectorAll(".BtnOptList");
for (var ii = 0; ii < MyClass.length; ii++) {
MyClass[ii].addEventListener('click', H_S_Btns_Func, false);
}
然后,要克隆 div,我使用以下函数:
$('#btnAddFlds').click(function () {
//Count "cloned divs" we currently have
//This will be also used as numeric ID of the new input(s) field(s) (1st have no number)
var DivNum = $('.SDetails').length;
// clone() element and update its id(s)
var newElem2 = $('.SDetails:first').clone().attr('id', function( i, val ) {
return val + DivNum;
});
// manipulate the id values of the input inside the new element
newElem2.find('input,.BtnOptList,.HideIt').each(function(){
$(this).attr('id', function( i, val ) {
return val + '_' + DivNum;
});
});
//Try to add function (DOESN'T WORK)
newElem2.find('.BtnOptList').each().addEventListener('click', H_S_Divs_Func, false);
//I omitted other stuff
});
我已经尝试过 clone(true,true) 但没有成功
这 (newElem2.find('.BtnOptList').each().addEventListener('click', H_S_Divs_Func, false);
) 不是您使用 jQuery 的 each
的方式。看看https://api.jquery.com/each/
剧透:
newElem2.find('.BtnOptList').each(function(i,e){e.addEventListener('click', H_S_Divs_Func, false)})
PS:由于您正在使用 jQuery,您可以使用它自己的事件方法并将侦听器添加到整个列表:
newElem2.find('.BtnOptList').on('click', H_S_Divs_Func, false)
根据文档使用带有 true
的克隆意味着
A Boolean indicating whether event handlers and data should be copied along with the elements. (v1.4 onwards)
因此,使用
.clone(true)
而不是
.clone()
我正在尝试克隆一个 "div" 以及其中的所有内容,但是其中一个事件在克隆的 div 中消失了(我对网络开发还很陌生,所以...我 "cloned" 在 SO 上找到的代码)。
缺少的事件添加如下 javascript:
var MyClass = document.querySelectorAll(".BtnOptList");
for (var ii = 0; ii < MyClass.length; ii++) {
MyClass[ii].addEventListener('click', H_S_Btns_Func, false);
}
然后,要克隆 div,我使用以下函数:
$('#btnAddFlds').click(function () {
//Count "cloned divs" we currently have
//This will be also used as numeric ID of the new input(s) field(s) (1st have no number)
var DivNum = $('.SDetails').length;
// clone() element and update its id(s)
var newElem2 = $('.SDetails:first').clone().attr('id', function( i, val ) {
return val + DivNum;
});
// manipulate the id values of the input inside the new element
newElem2.find('input,.BtnOptList,.HideIt').each(function(){
$(this).attr('id', function( i, val ) {
return val + '_' + DivNum;
});
});
//Try to add function (DOESN'T WORK)
newElem2.find('.BtnOptList').each().addEventListener('click', H_S_Divs_Func, false);
//I omitted other stuff
});
我已经尝试过 clone(true,true) 但没有成功
这 (newElem2.find('.BtnOptList').each().addEventListener('click', H_S_Divs_Func, false);
) 不是您使用 jQuery 的 each
的方式。看看https://api.jquery.com/each/
剧透:
newElem2.find('.BtnOptList').each(function(i,e){e.addEventListener('click', H_S_Divs_Func, false)})
PS:由于您正在使用 jQuery,您可以使用它自己的事件方法并将侦听器添加到整个列表:
newElem2.find('.BtnOptList').on('click', H_S_Divs_Func, false)
根据文档使用带有 true
的克隆意味着
A Boolean indicating whether event handlers and data should be copied along with the elements. (v1.4 onwards)
因此,使用
.clone(true)
而不是
.clone()