为什么这个 toggleClass() 不起作用？

Question

我在 jQuery 中有一个相当直接的 class 切换。但是我一辈子都弄不明白为什么它没有按预期运行。

单击标签上的任意位置时，<p> 的 class 应该切换。 它按预期工作如果您单击复选框。但是，如果您单击其他任何地方则不会发生切换

$('.xtrag p').on('click', function() {
  $(this).toggleClass('row9');
});

.xtrag {
  margin: 40px;
}
p {
  margin: 10px 0;
}
.row0 {
  background: #eee;
  padding: 4px 8px;
}
.row9 {
  background: #ffd;
}
.rt {
  float: right;
}
label {
  display: inline-block;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="xtrag">
  <p class="row0">
    <label for="xg1">
      <span class="rt">
            <input type="checkbox" name="extrag[]" value="1" id="xg1" />
          </span>
      Item 1
    </label>
  </p>
  <p class="row0">
    <label for="xg2">
      <span class="rt">
            <input type="checkbox" name="extrag[]" value="2" id="xg2" />
          </span>
      Item 2
    </label>
  </p>
  <p class="row0">
    <label for="xg3">
      <span class="rt">
            <input type="checkbox" name="extrag[]" value="3" id="xg3" />
          </span>
      Item 1
    </label>
  </p>
</div>

我错过了什么？

如何在单击标签时切换 <p> 的 class？

我试过以 <label> 为目标，然后使用 .parent()，这不会改变任何行为。

Answer 1

改为测试复选框的更改。该标签触发了另一次点击

$('.xtrag input').on('change',  function() {
  $(this).closest("p").toggleClass('row9');
});

.xtrag {
  margin: 40px;
}
p {
  margin: 10px 0;
}
.row0 {
  background: #eee;
  padding: 4px 8px;
}
.row9 {
  background: #ffd;
}
.rt {
  float: right;
}
label {
  display: inline-block; 
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="xtrag">
  <p class="row0">
    <label for="xg1">
      <span class="rt">
            <input type="checkbox" name="extrag[]" value="1" id="xg1" />
          </span>
      Item 1
    </label>
  </p>
  <p class="row0">
    <label for="xg2">
      <span class="rt">
            <input type="checkbox" name="extrag[]" value="2" id="xg2" />
          </span>
      Item 2
    </label>
  </p>
  <p class="row0">
    <label for="xg3">
      <span class="rt">
            <input type="checkbox" name="extrag[]" value="3" id="xg3" />
          </span>
      Item 1
    </label>
  </p>
</div>

Answer 2

这是因为您的 input 冒泡了 click 事件，您收到了两个事件调用而不是一个。

一种方法是停止输入冒泡，其他 - 检查事件目标：

$('.xtrag p').on('click', function(e) {
  if (typeof $(e.target).attr('type') !== 'undefined') {
    $(this).toggleClass('row9');
  }
});

.xtrag {
  margin: 40px;
}
p {
  margin: 10px 0;
}
.row0 {
  background: #eee;
  padding: 4px 8px;
}
.row9 {
  background: #ffd;
}
.rt {
  float: right;
}
label {
  display: inline-block;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="xtrag">
  <p class="row0">
    <label for="xg1">
      <span class="rt">
            <input type="checkbox" name="extrag[]" value="1" id="xg1" />
          </span>
      Item 1
    </label>
  </p>
  <p class="row0">
    <label for="xg2">
      <span class="rt">
            <input type="checkbox" name="extrag[]" value="2" id="xg2" />
          </span>
      Item 2
    </label>
  </p>
  <p class="row0">
    <label for="xg3">
      <span class="rt">
            <input type="checkbox" name="extrag[]" value="3" id="xg3" />
          </span>
      Item 1
    </label>
  </p>
</div>

为什么这个 toggleClass() 不起作用？

Why isn't this toggleClass() working?

jquery

css

toggleclass