Jquery-.click()函数不适用于附加的div
我有一个javascript函数Jquery-.click()函数不适用于附加的div,jquery,click,Jquery,Click,我有一个javascript函数 function whatClassNorH(thatDiv,prop){ if(prop==='numer'){ for(var i=0; i<tab.length;i++){ if($(thatDiv).hasClass('numer_'+i))return i; } } if(prop==='hide_id'){ for(var i=0; i<=ma
function whatClassNorH(thatDiv,prop){
if(prop==='numer'){
for(var i=0; i<tab.length;i++){
if($(thatDiv).hasClass('numer_'+i))return i;
}
}
if(prop==='hide_id'){
for(var i=0; i<=maxID;i++){
if($(thatDiv).hasClass('hide_id_'+i))return i;
}
}
}
function drawZadania(){
$('.content').html('');
for(var i=0; i<tab.length;i++){
if(tab[i][1]===0 || tab[i][1]==='0'){
$('.content').append('<div class="zadanie_line numer_' + i + ' hide_id_' + tab[i][0] + '"></div>');
$('.content .zadanie_line.numer_'+i).append('<div class="single_property priorytet numer_' + i + ' hide_id_' + tab[i][0] + '">Priorytet</div>');
$('.content .zadanie_line.numer_'+i).append('<div class="single_property dziedzina numer_' + i + ' hide_id_' + tab[i][0] + '">Dziedzina</div>');
$('.content .zadanie_line.numer_'+i).append('<div class="single_property tytul numer_' + i + ' hide_id_' + tab[i][0] + '">Tytul</div>');
$('.content .zadanie_line.numer_'+i).append('<div class="single_property data numer_' + i + ' hide_id_' + tab[i][0] + '">Data</div>');
$('.content .zadanie_line.numer_'+i).append('<div class="single_property opis numer_' + i + ' hide_id_' + tab[i][0] + '">Opis</div>');
$('.single_property.priorytet.numer_' + i + '.hide_id_' + tab[i][0]).html(tab[i][2]);
$('.single_property.dziedzina.numer_' + i + '.hide_id_' + tab[i][0]).html(tab[i][3]);
$('.single_property.tytul.numer_' + i + '.hide_id_' + tab[i][0]).html(tab[i][4]);
$('.single_property.data.numer_' + i + '.hide_id_' + tab[i][0]).html($.date(tab[i][5]));
$('.single_property.opis.numer_' + i + '.hide_id_' + tab[i][0]).html(tab[i][6]);
}
}
}
$('#btn_sortuj').click(function(){
$('.second_menu').append('<div id="btn_sort_priorytet">Sortuj Według Priorytetu</div>');
$('.second_menu').append('<div id="btn_sort_dziedzina">Sortuj Według Dziedziny</div>');
$('.second_menu').append('<div id="btn_sort_data">Sortuj Według Daty</div>');
});
$('#btn_sort_priorytet').click(function(){
sortPriorytet();
drawZadania();
});
$('#btn_zobacz').click(function(){
sortPriorytet();
drawZadania();
});
$('.zadanie_line').click(function(){
console.log('numer: '+ whatClassNorH(this,'numer'));
console.log('hideId: '+ whatClassNorH(this,'hide_id'));
});
drawZadania();
checkPage();
函数whatClassNorH(thatDiv,prop){
如果(属性=='numer'){
对于(var i=0;i只需使用.on()
:
然后,处理程序将被附加到所有现有的.zadanie\u行
元素和将来创建的所有元素。只需使用.on()
:
然后,处理程序将附加到所有现有的.zadanie_行
元素和将来创建的所有元素。为此,您必须使用事件委派。原因是您的btn_sort_priorytet
,zadanie_行
是动态创建的,但事件处理程序的绑定时间比创建时间早得多元素的。因此您的代码必须如下所示:
$('.second_menu').on("click", '#btn_sort_priorytet', function () {
sortPriorytet();
drawZadania();
});
$(document).on("click", '#btn_zobacz", function () { //or closest static parent (an element which exists all the time
sortPriorytet();
drawZadania();
});
$(".content").on("click", '.zadanie_line', function () {
console.log('numer: ' + whatClassNorH(this, 'numer'));
console.log('hideId: ' + whatClassNorH(this, 'hide_id'));
});
如果您使用的是较旧版本的jQuery,比如v1.7,您也可以使用live()
。最新版本的jQuery中没有这一功能,因此请注意它的使用。此外,与上的相比,live
的性能较差
$('#btn_sort_priorytet').live("click", function () {
sortPriorytet();
drawZadania();
});
$('#btn_zobacz').live("click", function () {
sortPriorytet();
drawZadania();
});
$('.zadanie_line').live("click", function () {
console.log('numer: ' + whatClassNorH(this, 'numer'));
console.log('hideId: ' + whatClassNorH(this, 'hide_id'));
});
关于
的文档:
live
的文档:为此,您必须使用事件委派。原因是您的btn\u sort\u priorytet
,zadanie\u line
是动态创建的,但事件处理程序的绑定时间远远早于元素的创建时间。因此,您的代码必须如下所示:
$('.second_menu').on("click", '#btn_sort_priorytet', function () {
sortPriorytet();
drawZadania();
});
$(document).on("click", '#btn_zobacz", function () { //or closest static parent (an element which exists all the time
sortPriorytet();
drawZadania();
});
$(".content").on("click", '.zadanie_line', function () {
console.log('numer: ' + whatClassNorH(this, 'numer'));
console.log('hideId: ' + whatClassNorH(this, 'hide_id'));
});
如果您使用的是较旧版本的jQuery,比如v1.7,您也可以使用live()
。最新版本的jQuery中没有这一功能,因此请注意它的使用。此外,与上的相比,live
的性能较差
$('#btn_sort_priorytet').live("click", function () {
sortPriorytet();
drawZadania();
});
$('#btn_zobacz').live("click", function () {
sortPriorytet();
drawZadania();
});
$('.zadanie_line').live("click", function () {
console.log('numer: ' + whatClassNorH(this, 'numer'));
console.log('hideId: ' + whatClassNorH(this, 'hide_id'));
});
关于
的文档:
live的文档
:将委托与.on()一起使用:
将委派与.on()一起使用:
on
/live
函数您的代码显示大量重复。这是一个坏迹象。您应该尝试将其抽象并缩短至少50%。请不要将复制和粘贴用作编程工具。on
/live
函数您的代码显示大量重复。这是一个坏迹象。您应该尽量抽象和缩短它,至少50%。请不要使用复制和粘贴作为编程工具。