Question

我在下面有这个简单的代码。有两个单选按钮。如果单击其中一个，它将执行将打印到＆＃34; object_type＆＃34;的代码。在我的真实程序中，click会运行多行代码并加载一个map。如果之前已经选择了单选按钮，我再次单击它，我不希望代码再次运行。我怎么能做到这一点？

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#r1,#r2").on("click", function(){
      var radiovalue = $('input[name=tt1]:checked').val();
      $('#object_type').html(radiovalue);
   });
});
</script>
<div class='mi' id='r1'><input type="radio" name="tt1" value="1" id="radio_1">One</div>
<div class='mi' id='r2'><input type="radio" name="tt1" value="2" id="radio_2">Two</div>
<div id="object_type"></div>

Answer 1

为什么不直接定位radio按钮并使用change事件？

http://jsfiddle.net/bppLxmxz/

正如您所看到的那样，如果已经检查警报将不会产生，change事件将不会触发。

注意如果您需要更大的区域来获取点击次数，那么您可能需要使用<label>元素而不是当前的<div> 。

$(function(){

  $("[name=tt1]").change(function(){
      var radiovalue = $('input[name=tt1]:checked').val();
      alert("First time checked!");
      $('#object_type').html(radiovalue);
   });

});

<label class='mi' id='r1'><input type="radio" name="tt1" value="1" id="radio_1">One</label>
<label class='mi' id='r2'><input type="radio" name="tt1" value="2" id="radio_2">Two</label>
<div id="object_type"></div>

Answer 2

当事件处理程序添加到元素时，也可以使用jQuery .off()函数删除它。在我的解谜解决方案中，我检测到哪个条目导致了click事件，然后关闭该元素的事件处理程序，以便它不会再次发生。这是我使用的代码，后跟一个jsFiddle示例：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#r1,#r2").on("click", function(event){
        var radiovalue = $('input[name=tt1]:checked').val();
        $('#object_type').html(radiovalue);
        $(event.currentTarget).off("click");
   });
});
</script>
<div class='mi' id='r1'><input type="radio" name="tt1" value="1" id="radio_1">One</div>
<div class='mi' id='r2'><input type="radio" name="tt1" value="2" id="radio_2">Two</div>
<div id="object_type"></div>

jsFiddle Example

Answer 3

您可以在id中存储最终点击广播的#object_type，并在执行代码之前使用if语句检查并比较该值。

＆＃13;

$(document).ready(function(){
  $("#r1,#r2").on("click", function(){
    if( !$(this).is( $('#object_type').data('last-click') ) ) {
      var radiovalue = $('input[name=tt1]:checked').val();
      $('#object_type').html(radiovalue)
      .data('last-click', '#' + this.id);
    } else {
      alert( 'Was the last one clicked' ); //just for demo:: else clause is not required
    }
   });
});

＆＃13;

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='mi' id='r1'><input type="radio" name="tt1" value="1" id="radio_1">One</div>
<div class='mi' id='r2'><input type="radio" name="tt1" value="2" id="radio_2">Two</div>
<div id="object_type"></div>

＆＃13;

jQuery - 如果已选择单选按钮，则不要再次运行代码

3 个答案: