0

私は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<=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 をクリックすると、ボタンとして機能する別の 3 つの div が追加されます。それらをクリックしても何も起こりません。

また、ページが初めて読み込まれるときに drawZadania() 関数を使用し、.zadani_line 要素をクリックすると、.number と .hiddenId の数が正しく console.log に記録されます。しかし、#btn_zobacz で再度描画すると、クリック('.zadania_line') がトリガーされません。

私の問題は、クリック関数が div のすべてのクリックに応答しないことです。私は何をすべきか？

4

3 に答える 3

2

.on() で委任を使用します。

$('.content').on('click','.zadanie_line',function(){
    //...
});
于 2013-07-07T11:58:17.710 に答える
1

これにはイベント委任を使用する必要があります。その理由は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'));
});

v1.7 などの古いバージョンの jQuery を使用している場合は、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'));
});

のドキュメントon: http://api.jquery.com/on/

のドキュメントlive: http://api.jquery.com/live/

于 2013-07-07T11:57:09.770 に答える
0

使用するだけ.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-07T11:56:57.093 に答える