javascript复选框功能只能运行一次

Question

使用Bootstrap 3.3.6，JQuery 1.11.3

我在一个小部分遇到了问题，特别是关于用户单击行时选择和取消选择复选框。

jsfiddle在这里： http : //jsfiddle.net/0ogdt9s7/1/

html

<div id="not-working">
  <h3>
  Click the text, then click the box
  </h3>
  <div class="selection-row" data-id="20">
    <div class="col-md-5">Data 20</div>
    <div class="col-md-2">
      <input type="checkbox" name="selectedDudes[]" value="20" id="checkbox-20">
    </div>
  </div>
  <div class="selection-row" data-id="22">
    <div class="col-md-5">Data 22</div>
    <div class="col-md-2">
      <input type="checkbox" name="selectedDudes[]" value="22" id="checkbox-22">
    </div>
  </div>
</div>

js

$(document).ready(function() {

  $(document).on("click", "div.selection-row", function() {
    var $cb = $('input[type="checkbox"]', $(this)), is_on = $cb.prop('checked');
    if (is_on) {
      //if its already checked, uncheck it
      $cb.prop('checked', false);
    } else {
      //if its not checked, check it
      $cb.prop('checked', true);
    }
  });
});

行选择效果很好，但是如果单击行内的复选框，则该复选框不会更改。 单击“数据”将正确更改它，但是该复选框没有执行任何操作。

重要说明：

它必须位于$(document).on()因为它位于通过AJAX显示的弹出窗口内。

我假设这是一件非常简单的事情，但我只是找不到。 任何帮助表示赞赏。

Answer 1

由于冒泡阶段，您得到了意外的结果。

事件的冒泡阶段会触发从下到上监听事件的所有元素的父级：

在您的情况下，当用户第一次单击该复选框时，它会被选中。 然后，开始模糊阶段，并开始搜索正在侦听该事件的最接近的父级，如果存在，则执行其处理程序（函数）。 您有一个： selection-row 。

.selection-row元素的处理程序将还原复选框的默认行为，因此就像用户没有执行任何操作一样。

如果您想要的是当用户单击“ Data 20或“ Data 22并且选中相应的复选框时，则无需使用javascript。 label元素应解决以下问题：

  <div class="selection-row" data-id="20">
  <div class="col-md-5"><label for="checkbox-20" >Data 20</label></div>
    <div class="col-md-2">
      <input type="checkbox" name="selectedDudes[]" value="20" id="checkbox-20">
    </div>
  </div>
  <div class="selection-row" data-id="22">
  <div class="col-md-5"><label for="checkbox-22">Data 22</label></div>
    <div class="col-md-2">
      <input type="checkbox" name="selectedDudes[]" value="22" id="checkbox-22">
    </div>
  </div>

检查一下： http : //jsfiddle.net/0ogdt9s7/2/

正如您所说的那样，您需要整行都可单击，您可以检查事件的原始目标（最里面的元素）是否是input并通过return;一个中断处理程序来让默认行为完成其工​​作return; ：

$(document).on("click", "div.selection-row", function(e) {
    if ($(e.target).is('input')) return;

    var $cb = $('input[type="checkbox"]', $(this)), is_on = $cb.prop('checked');
    if (is_on) {
      //if its already checked, uncheck it
      $cb.prop('checked', false);
    } else {
      //if its not checked, check it
      $cb.prop('checked', true);
    }
  });

检查此解决方案： http : //jsfiddle.net/0ogdt9s7/6/

Answer 2

同事刚刚通过目标检查解决了它：

http://jsfiddle.net/0ogdt9s7/4/

$(document).ready(function() {
  $(document).on("click", ".selection-row", function(e) {
    var $target = $(e.toElement);
    if (!$target.is('input')) {
      console.log($target);
      var $cb = $('input[type="checkbox"]', $(this)),
        is_on = $cb.is(':checked');
      if (is_on) {
        //if its already checked, uncheck it
        $cb.prop('checked', false);
      } else {
        //if its not checked, check it
        $cb.prop('checked', true);
      }
    }
  });
});

请稍等一下，看看是否有更好的解决方案

Answer 3

您可以更改要监听的元素，例如单击以下文本：

 $(".selector").click(function() { $(this).parent().find(".chkbox").trigger("click"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="not-working"> <h3> Click the text, then click the box </h3> <div data-id="20"> <div class="col-md-5 selector">Data 20</div> <div class="col-md-2"> <input class="chkbox" type="checkbox" name="selectedDudes[]" value="20" id="checkbox-20"> </div> </div> <div data-id="22"> <div class="col-md-5 selector">Data 22</div> <div class="col-md-2"> <input class="chkbox" type="checkbox" name="selectedDudes[]" value="22" id="checkbox-22"> </div> </div> </div> 

Answer 4

好的，这是一个带有引导列表组的干净示例

$(".list-group-item").click(function(event) {
  var target = $(event.target);
  if (target.is("input")) {
    $(this).trigger(click);
  } else {
    $(this).find(".chkbox").trigger("click");
  }
});

<ul class="list-group">
  <li class="list-group-item">
    <input class="chkbox" type="checkbox"> Porta ac consectetur ac
  </li>
</ul>

演示