jQuery - 如果單選按鈕已被選中，則不要再次運行代碼

Question

我有下面這個簡單的代碼。有兩個單選按鈕。如果你點擊其中的一個，它將執行一個代碼，打印成「object_type」。在我的真實程序中，點擊運行許多代碼行並加載地圖。如果之前已經選擇了單選按鈕，我再次單擊它，我不希望代碼再次運行。我怎麼能做到這一點？

<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語句來檢查和執行之前比較值碼。

$(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 
 
    } 
 
    }); 
 
});

<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>​