Question

我不知道为什么但是第一次单击事件目标时，它没有生效，你必须单击事件目标两次才能生效但结果却相反。考虑一下我使用复选框创建的实验：

$('.label-button').on('click', checkboxStatus);

function checkboxStatus(e) {
  var $evt = $(e.target);

  if($evt.next().is(':checked')) {
    $('.message').find('.status').text('checked');
  } else {
    $('.message').find('.status').text('not checked');
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="cbox" class="label-button" style="display:inline-block;padding:0.5rem 0.7rem;color:#fff;background:#21a1e1;cursor:pointer;">Click to check</label>

<input type="checkbox" id="cbox" />

<div class="message" style="display:block; margin-top:10px;">Checkbox is "<span class="status">not checked</span>"</div>

第一次单击按钮时，.status表示仍未“检查”，但实际上已选中该复选框。第二次单击按钮时，它会显示更改，但相反。选中该复选框但状态为“未选中”;取消选中该复选框，但状态为“已选中”。我试图添加e.stopPropagation()，但它没有用。

我怎样才能做到这一点？

Answer 1

当调用标签上的click事件时，var str = "http://localhost:8080/myapp?age=12&add=mumbai&name=myname"; var txt2 = str.slice(0, str.indexOf("?")) + "?" + "tel=12345&" // ^^^^^ + str.slice(str.indexOf("?") + 1); // ^^^ alert(txt2);状态不会改变，因此您正在观察这种不一致。

input上的change元素而不是input上的click事件绑定label事件！

$('#cbox').on('change', checkboxStatus);

function checkboxStatus() {
  $('.message').find('.status').text(this.checked ? 'checked' : 'not checked');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="cbox" class="label-button" style="display:inline-block;padding:0.5rem 0.7rem;color:#fff;background:#21a1e1;cursor:pointer;">Click to check</label>

<input type="checkbox" id="cbox" />

<div class="message" style="display:block; margin-top:10px;">Checkbox is "<span class="status">not checked</span>"</div>

Answer 2

使用change而不是click更改活动。
并在input:checkbox上应用更改事件，而不是使用标签
最后更改检查条件是否为$evt.is(':checked')

$('#cbox').on('change', checkboxStatus);

function checkboxStatus(e) {
  var $evt = $(e.target);

  if($evt.is(':checked')) {
    $('.message').find('.status').text('checked');
  } else {
    $('.message').find('.status').text('not checked');
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="cbox" class="label-button" style="display:inline-block;padding:0.5rem 0.7rem;color:#fff;background:#21a1e1;cursor:pointer;">Click to check</label>

<input type="checkbox" id="cbox" />

<div class="message" style="display:block; margin-top:10px;">Checkbox is "<span class="status">not checked</span>"</div>

Answer 3

$(function(){
  $('.label-button').on('click', checkboxStatus);

  function checkboxStatus(e) {
    var $evt = $(e.target).next();
    
    if( $evt.prop('checked') ) {
      $('.message').find('.status').text('not checked');
    } else {
      $('.message').find('.status').text('checked');
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label for="cbox" class="label-button" style="display:inline-block;padding:0.5rem 0.7rem;color:#fff;background:#21a1e1;cursor:pointer;">Click to check</label>

<input type="checkbox" id="cbox" />

<div class="message" style="display:block; margin-top:10px;">Checkbox is "<span class="status">not checked</span>"</div>

事件仅在触发两次时触发

3 个答案: