Bootstrap / jQuery绑定click（）事件在添加它的同一个函数中触发

Question

我有一个Bootstrap卡，当点击它时，向用户提供一系列选择，然后应该返回到它的原始状态。

的jsfiddle：https://jsfiddle.net/wgksny22/6/

该卡是基本的：

<div class="card border-secondary my-cell">
  <div class="card-header">
    <h6>Card Header</h6>
  </div>
  <div class="card-body my-cell-inner">
  </div>
</div>

以下是作为可克隆模板加载optionsTemplate：

<div id="options-template">
  <div class="row">
    <div class="col btn-group-vertical btn-group btn-group-toggle options1" data-toggle="buttons">
        <button type="button" class="btn btn-primary">A</button>
        <button type="button" class="btn btn-primary">B</button>
    </div>
    <div class="col btn-group-vertical btn-group btn-group-toggle options2" data-toggle="buttons">
        <button type="button" class="btn btn-primary">C</button>
        <button type="button" class="btn btn-primary">D</button>
    </div>
  </div>
</div>

运行该过程的JS：

        var cell = $('.my-cell');
        var innerCell = $('.my-cell-inner', cell);
        var onClick = function() {
            // the buttons templates
            var edit = optionsTemplate.clone();
            $(".options1 .btn", edit).click(function() {
                $(".options1", edit).hide();
                $(".options2", edit).show();
            });
            $(".options2 .btn", edit).click(function() {
                $(".options2", edit).hide();
                $(innerCell).empty();
                // the problem is here; this is fired as part
                // of the click applying to this function
                $(cell).click(onClick);
            });

            $(".options1", edit).show();
            $(".options2", edit).hide();

            $(cell).off('click');
            $(innerCell).append(edit);
        };
        $(cell).click(onClick);

它一直工作到第二次选择结束;作为点击按钮的一部分，处理重新添加的点击绑定并重新显示第一个选择：

• 单击 - >显示A / B - >显示C / D - >显示A / B等。

它应该是：

• 单击 - >显示A / B - >显示C / D - >完成（准备再次单击）。

如何以不会导致其作为持续点击的一部分被触发的方式重新绑定点击？

我尝试过使用jQuery承诺，但它似乎没有起作用：

jQuery.Deferred().promise().done(function() {
    // this is never reached
    $(cell).click(onClick);
});

Answer 1

jquery点击元素的3个选项：

$(".card-header").click(function() {
       $(".options1").show();

    })
 $(".options1 .btn").click(function() {

            $(".options1").hide();
            $(".options2").show();
        });
  $(".options2 .btn").click(function() {
            $(".options2").hide();               
        });

在您的代码中始终显示在编辑变量中加载的两个单击选项，我不知道为什么。

Answer 2

所以这个问题被称为'冒泡'的事件。事件从子节点传播到父节点，因此向父节点添加事件侦听器将导致触发该事件侦听器。

答案是阻止事件传播，而不是试图巧妙地使用函数，这是在孩子甚至听众中使用event.stopPropagation()完成的。

修正了JS：

    var cell = $('.my-cell');
    var innerCell = $('.my-cell-inner', cell);
    var onClick = function() {
        // the buttons templates
        var edit = optionsTemplate.clone();
        $(".options1 .btn", edit).click(function() {
            // block event propagation to parent
            event.stopPropagation();
            $(".options1", edit).hide();
            $(".options2", edit).show();
        });
        $(".options2 .btn", edit).click(function() {
            // block event propagation to parent
            event.stopPropagation();
            $(".options2", edit).hide();
            $(innerCell).empty();
        });

        $(".options1", edit).show();
        $(".options2", edit).hide();

        $(innerCell).append(edit);
    };
    $(cell).click(onClick);