Странный флажок проблема с функцией щелчка - PullRequest
Новая
       36

Странный флажок проблема с функцией щелчка

0 голосов
/ 15 февраля 2012

Использование таблиц данных. Проблема в том, что $('.checkbox') функция щелчка работает только на первой странице таблицы данных, и больше нигде. Обратите внимание, что $('#check_all') работает на каждой странице.

JS выглядит так: 

function changeQt(){
    if($('#quantity').is(':hidden'))            
        $('#quantity').fadeIn("slow");
    $('#quantity').animate({
        borderColor: "#00a9e0"
    }, 'fast').text(totalqt).delay(400).animate({
        borderColor: "#fff"
    }, 'fast');    


}

function doIt(obj) {
    if ($(obj).is(":checked")) {
        $(obj).closest("tr").not('#hdr').addClass("row_selected");
        totalqt=totalqt + parseInt($(obj).closest("tr").find("#qt").text(), 10);        
    }
    else {
        $(obj).closest("tr").not('#hdr').removeClass("row_selected");
        totalqt=totalqt - parseInt($(obj).closest("tr").find("#qt").text(), 10);
        if(totalqt<0) totalqt=0;
    }
}



function checkAllCheckboxes(isChecked) { 
    if(isChecked ){ 
        totalqt=0; 
    } 
    $('.checkbox').each(function(){ 
        $(this).prop('checked', isChecked); 
        doIt(this); 
    }); 
    changeQt(); 
} 

$(document).delegate('td.item_id', 'click', function(e){ 
    e.stopPropagation(); 
}); 
$(document).delegate('#list > tbody > tr', 'click', function(){ 
    window.open($(this).attr("url")); 
});

$(document).ready(function() {
    $("input:submit, input:reset").button();
    $.datepicker.regional[""].dateFormat = 'dd.mm.yy';
    $.datepicker.setDefaults($.datepicker.regional['']);

    $('select[name=list_length]').change(function(){
        if ($('#check_all').is(':checked'))
            $('#check_all').click();   
    });

    var oTable= $('#list').dataTable( {       
        "bJQueryUI": true, 
        "iDisplayLength": 25,
        "aaSorting": [],
        "aoColumns": [ 
        {
            "bSortable": false
        },
        null, null, null,null,null, null, null
        ]    
    } ).columnFilter({
        sPlaceHolder: "head:before",
        aoColumns: [    null, null, null,null,null, null, null,
        {
            type: "date-range"
        }
        ]

    });



    $('.checkbox').click(function(e) {
        e.stopPropagation();
        doIt(this);
        changeQt()

    });

    $('select[name=list_length]').change(function(){ 
        if($('#check_all').is(':checked')){ 
            $('#check_all').prop('checked', false); 
            checkAllCheckboxes(false); 
        } 
    }); 

    $('#check_all').click(function(){ 
        checkAllCheckboxes(this.checked); 
    }); 
 });

Вот 1 строка из этой таблицы: 

<tr url="?page=item&id=1411">

<td class="item_id"><input type="checkbox" name="checkbox[]" method="post" value="1411" class="checkbox"/>    1411</td>
<td> 9814</td>
<td style="text-align:center">BK</td>
<td style="text-align:center">36</td>
<td style="text-align:center" id="qt">1</td>
<td style="text-align:center">15</td>
<td style="text-align:center">12</td>
<td>15.02.2012</td>

</tr>

Если кто-то хочет увидеть страницу в действии, присоединяйтесь к обсуждению: Здесь .

Ответы [ 2 ]

1 голос
/ 15 февраля 2012

Я предполагаю, что dataTables добавляет / удаляет элементы из DOM, и вместе с ними будут добавлены обработчики событий, прикрепленные к ним.

Вместо того, чтобы прикреплять события с помощью ярлыков (например, click() или blur()), которые будут работать, только когда рассматриваемый элемент доступен при загрузке страницы, используйте delegate() (или on() в jQuery 1.7+) 

$("#list").delegate('.checkbox', 'click', function(e) {
    e.stopPropagation();
    doIt(this);
    changeQt()
});

jQ 1,7+ 

$("#list").on('click', '.checkbox', function(e) {
    e.stopPropagation();
    doIt(this);
    changeQt()
});
0 голосов
/ 15 февраля 2012

Часто задаваемые вопросы о событиях будут вам полезны здесь: http://datatables.net/faqs#events.Это также включает примеры того, как применить решение.В этом случае я бы предложил использовать: 

table.$('.checkbox').click(function(e) {

, где table - это экземпляр DataTables.Метод $ API предоставит вам объект jQuery, который будет работать со всеми строками таблицы, независимо от текущей подкачки.

...