jQuery的 - 。點擊（）函數不上附加的div

我在JavaScript中jQuery的 - 。點擊（）函數不上附加的div

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();

它是如何工作的函數工作：當頁面開始，後來就點擊#btn_zobacz，單擊事件正確觸發器，因爲在頁面的html中#btn_zobacz。稍後，當我點擊#btn_sortuj時，它會追加另外三個用作按鈕的div。當我點擊它們時，沒有任何反應。

此外，當第一次加載頁面時，我使用drawZadania（）函數，並且當我單擊.zadanie_line元素時 - 它正確地使用console.log號碼.number和.hiddenId。但是當我用#btn_zobacz再次繪製它們時，點擊（'。zadania_line'）不會觸發。

我的問題是，點擊功能根本不響應所有點擊div。我該怎麼辦？

來源

2013-07-07 MateuszC

'on' /'live'功能 –

您的代碼顯示了大量的重複。這是一個不好的跡象。你應該儘量抽象和縮短它，至少50％。請不要使用複製和粘貼作爲編程工具。 – Tomalak

使用代表團。對（）：

$('.content').on('click','.zadanie_line',function(){ 
    //... 
});

來源

2013-07-07 11:58:17

只需使用.on()：然後http://api.jquery.com/on/

$('.content').on('click', '.zadanie_line', function(){ 
    console.log('numer: '+ whatClassNorH(this,'numer')); 
    console.log('hideId: '+ whatClassNorH(this,'hide_id')); 
});

的處理程序將被安裝到所有現有.zadanie_line元素和將來創建的那些。

來源

2013-07-07 11:56:57 mishik

你必須爲此使用事件委託。原因是因爲您的btn_sort_priorytet,zadanie_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中，所以要小心它的使用。另外，與on相比，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')); 
});

Google文檔on：http://api.jquery.com/on/

Google文檔live：http://api.jquery.com/live/

來源

2013-07-07 11:57:09 krishgopinath

jQuery的 - 。點擊（）函數不上附加的div

回答

相關問題