Событие щелчка jQuery дважды срабатывает при нажатии на флажок

ProgramBox

Событие щелчка jQuery дважды срабатывает при нажатии на флажок

Post author:admin
Запись опубликована:2 сентября, 2022
Post category:Вопросы по программированию

#javascript #jquery #events #click

#javascript #jquery #Мероприятия #нажмите

Вопрос:

Я играю с таблицами данных, и у меня есть такая таблица :

 <table id='dt'>
    <thead><!-- Some Header --></thead>
    <tbody>
        <tr data-lineid=1>
            <td><input type='checkbox' class='checked_entry' id='checked_1'></td>
            <td>Column 1</td>
            <td>Column 2</td>
        </tr>
        <!-- Rest of the table -->
    </tbody>
</table>

Что я пытаюсь сделать, так это иметь возможность щелкать везде в строке, и он установит флажок в этой строке :

 $('#dt tbody').on('click', 'tr', function() {
    var id = $(this).data('lineid');
    if ($('#checked_' id).prop('checked')) {
        $('#checked_' id).prop('checked', false);
    } else {
        $('#checked_' id).prop('checked', true);
    }
});

Это работает нормально, за исключением того, что теперь, когда я нажимаю на сам флажок, кажется, что он запускает событие щелчка флажка плюс событие, привязанное к tr .

Я пробовал что-то вроде :

 $('#dt tbody').on('click', 'tr :not(input)', function() { ... });

Но, похоже, это не работает.

Кто-нибудь может дать мне совет по этому поводу, пожалуйста?

Спасибо!

Ответ №1:

Попробуйте выйти tr из события щелчка всякий раз, когда пользователь нажимает на флажок,

 $('#dt tbody').on('click', 'tr', function(e) {
    if($(e.target).is('input')) { return; }
    var id = $(this).data('lineid');
    if ($('#checked_' id).prop('checked')) {
        $('#checked_' id).prop('checked', false);
        // ... and some other stuff
    } else {
        $('#checked_' id).prop('checked', true);
        // ... and some other stuff
    }
});

Ответ №2:

Это потому, что событие щелчка на самом флажке распространяется. В качестве решения вы можете проверить, была ли фактическая цель щелчка флажком, в этом случае ничего не делайте в обработчике щелчков.

 $('#dt tbody').on('click', 'tr', function (e) {
    if (!$(e.target).is('input:checkbox')) {
        $(this).find('input:checkbox').prop('checked', function (i, checked) {
            return !checked;
        })
    }
});

Демонстрация: скрипка

Ответ №3:

Во-первых, удалите итеративный идентификатор, который вам не нужен; по крайней мере, не только для идентификации строки, содержащей флажок.

 <table id='dt'>
    <thead><!-- Some Header --></thead>
    <tbody>
        <tr>
            <td><input type='checkbox' class='checked_entry' /></td>
            <td>Column 1</td>
            <td>Column 2</td>
        </tr>
    </tbody>
</table>

Затем в jQuery вы можете прикрепить свое событие к tr обходу с помощью, чтобы найти соответствующий флажок, а также использовать stopPropagation() щелчок флажка, чтобы остановить перехват события дважды.

 $('#dt tbody').on('click', 'tr', function() {
    var $checkbox = $(this).find(':checkbox');
    $checkbox.prop('checked', !$checkbox.prop('checked'));
});
$('#dt input:checkbox').click(function(e) {
    e.stopPropagation();
});

Пример скрипки

1. Мне нужен идентификатор для других целей, которые я здесь не вставлял. Тем не менее, спасибо за ответ.

2. Справедливое замечание. Его можно легко добавить обратно, но оно не требуется для проверки / снятия флажков связанного tr

3. Конечно, никаких оправданий по этому поводу 🙂 Я буду использовать ваше решение для проверки / снятия флажка! Спасибо.

Ответ №4:

Вы можете убедиться, что событие щелчка не распространяется на элемент строки, когда вы нажимаете флажок следующим образом:

 $('#dt tbody input').on('click', function(e) { e.stopPropagation(); });

Ответ №5:

Вы можете попробовать это.

 $('#dt tbody').on('click', 'tr', function(event) {
    var id = $(this).data('lineid');
    if ($('#checked_' id).prop('checked')) {
        $('#checked_' id).prop('checked', false);
    } else {
        $('#checked_' id).prop('checked', true);
    }
      event.preventDefault();
});

Ответ №6:

 $('#dt tbody').on('click', 'tr', function(e) {
    e.preventDefault();
    var id = $(this).data('lineid');
    if ($('#checked_' id).prop('checked')) {
        $('#checked_' id).prop('checked', false);
    } else {
        $('#checked_' id).prop('checked', true);
    }
});

Ответ №7:

Поскольку у вас уже есть событие щелчка строки таблицы.Оно также будет запущено при щелчке флажка, и здесь вы меняете состояние флажка в событии щелчка.Поэтому лучше предотвратить событие checkbox по умолчанию ().Лучшим решением было бы:

 $('#dt tbody').on('click', 'tr', function(e) {
e.preventDefault();
var id = $(this).data('lineid');
if ($('#checked_' id).prop('checked')) {
    $('#checked_' id).prop('checked', false);
    // ... and some other stuff
} else {
    $('#checked_' id).prop('checked', true);
    // ... and some other stuff
}
});

Метки: Событие щелчка jQuery дважды срабатывает при нажатии на флажок