Question

我有一些可以“添加到收藏夹”的项目列表，在这种情况下，我使用复选框，因此用户可以选中该复选框以添加到收藏夹，反之亦然，取消选中该复选框即可从收藏夹中删除。

流程应该是这样的：

当未选中该复选框，并且用户单击它时，它将被选中
选中该复选框并用户单击时，将触发一个模态，要求他们确认是否真的要从收藏夹中删除该项目。在弹出模式中，有一个确认按钮，当用户单击它时，它将取消选中该复选框并关闭弹出模式。

下面是html元素

    <div class="star_wrap">
      <input type="checkbox" /><label onclick="confirmLabelRemove(this)"><label>
    </div>
    i put the click event in label to trigger the input before it to be checked or unchecked

下面是为每个复选框生成唯一ID的代码

    var listItems = $(".star_wrap"); // the container of each checkbox
    listItems.each(function (idx) {
    $(this).find('input').attr('id', 'chkbox' + idx);
    //$(this).find('label').attr('for', 'chkbox' + idx); I don't want this 
    feature because If I click on the label it will prop check the 
    checkbox before the pop up modal show up.
});

下面是触发道具检查事件的代码

    function confirmLabelRemove(obj) {
    var thisLabelInput = $(obj).prev(); // find the input before the label

    if ($(thisLabelInput).is(':checked')) {
    overlayConfirmShow(); // transparent layer to prevent back content clickable
    $('.confirmation_box').addClass('show'); // show the pop up modal

    $('#confirmBoxConfirm').on('click', function () {
        $(obj).prev().prop('checked', false);
        $(obj).closest('.grid-item').addClass('unfav');
        overlayConfirmHide();
        $('.confirmation_box').removeClass('show');
     });
    } else {
      $(obj).closest('.grid-item').removeClass('unfav');
      $(obj).prev().prop('checked', true);
     }
    }

如果只有1个复选框，则可以正常工作。但是，当它们是复选框列表时，取消选中和选中复选框之一将触发先前选中或未选中的复选框。请指教，谢谢。

Answer 1

当此行多次运行（$('#confirmBoxConfirm').on('click', function () {）并且没有被删除时，实际上您将多个处理程序附加到click事件。这意味着在单击时，将运行先前设置的每个处理程序。

您可以先尝试将其删除：

$('#confirmBoxConfirm').off('click').on('click', function () {

，或者如果您已经有了其他单击处理程序，并且只想删除该单击处理程序，则它必须是一个命名函数：

function theClick() {
    $(obj).prev().prop('checked', false);
    $(obj).closest('.grid-item').addClass('unfav');
    overlayConfirmHide();
    $('.confirmation_box').removeClass('show');
};

$('#confirmBoxConfirm').off('click', theClick).on('click', theClick);

所有复选框均已选中，但我只希望触发一个复选框

1 个答案: