jQuery函數必須重複才能工作

我只是進入jQuery，並注意到我的一些代碼執行的方式有奇怪的行爲。當我執行一個基於點擊動作的函數時，該函數會第一次運行兩次，點擊次數爲「未定義」，第二次爲期望值。最終的結果是代碼「工作」，但我想了解我在做什麼錯誤導致這種意外的行爲。jQuery函數必須重複才能工作

這裏是我的jQuery代碼：

$(function() { 

//$('#venue').buttonset().click(function(event, ui) { 
//$('#venue').buttonset().live('click', function (event, ui) { 
    $('#venue').buttonset().unbind('click').bind('click', function(event, ui) { 

    var venueName = $("input[name='venue']:checked").val(); 

    if (venueName == "venue2") { 
     alert("About to deselect, venue: " + venueName); 
     $("#meallist option[value='Dinner']").removeAttr("selected"); 
    } else { 
     alert("Doing nothing, venue: " + venueName); 
    } 
    }); 
});

注意三種不同的方式表達頂部的點擊動作，從jQuery的文檔，並在這個網站以前的答案的。所有結果都一樣。你可以在這裏嘗試一下：

http://jsfiddle.net/Qaxx3/6/

感謝任何見解。我希望這是一個簡單的新手錯誤。

來源

2012-03-07 k3davis

問題，如果你刪除它工作正常 – sandeep 2012-03-07 12:24:35

您在包含輸入的元素上設置了click事件。如果你直接將它放在它按預期工作的投入：

$('#venue').buttonset().find('input').click(function(event, ui) {

來源

2012-03-07 12:19:45 Andy

這個答案是最簡單的，也是唯一一個不重複自身，提供期望值並維護我想要的jQuery UI元素的人。這可能更像是我問這個問題的問題，而不是其他人回答的問題 - 謝謝大家的建議。 – k3davis 2012-03-07 13:56:50

@ k3davis很高興我能幫到你。對我來說，你的問題很清楚 – Andy 2012-03-07 14:30:28

默認情況下，您的任一個收音機都未選中。作品如果我改變源的小提琴：

<input type="radio" value="venue1" name="venue" id="venue1" checked="checked">

如果你不想或者默認選擇，使用change事件和preventDefault：下面的代碼在你的提琴作品：

$(function() { 
    //$('#venue').buttonset().click(function(event, ui) { 
    //$('#venue').buttonset().live('click', function (event, ui) { 
    $('#venue').buttonset().bind('change', function (event, ui) { 
     var venueName = $("input[name='venue']:checked").val(); 
     if (venueName == "venue2") { 
      alert("About to deselect, venue: " + venueName); 
      $("#meallist option[value='Dinner']").removeAttr("selected"); 
     } else { 
      alert("Doing nothing, venue: " + venueName); 
     } 
     event.preventDefault(); 
     return false; 
    }); 
});

來源

2012-03-07 12:17:29 pete

我絕對不希望有任何無線電默認選中的，但是這是一個有趣的觀察。 – k3davis 2012-03-07 12:23:23

再看一下，因爲你不想默認選中。更新了答案。 – pete 2012-03-07 12:36:02

您應該在函數的某處添加event.stopPropagation()以停止事件冒泡。像這樣：

$('#venue').buttonset().unbind('click').bind('click', function(event, ui) { 
     // ... your code 
     event.stopPropagation(); 
    }

，或者就返回false：

$('#venue').buttonset().unbind('click').bind('click', function(event, ui) { 
     // ... your code 
     return false; 
    }

否則該事件被「穿過」父DIV，這也將引發同樣的單擊事件，並執行代碼另一次

--- btw，'undefined'是你的單選按鈕在沒有被選中時的值（這是你現在的默認狀態......）。你有沒有理由首先解除「點擊」事件？

來源

2012-03-07 12:18:15 giorgio

添加'event.stopPropagation（）;'似乎沒有效果，並且在返回false時阻止了第二個循環，同時它也會中斷它，因爲它會在意外返回值「undefined」的第一個循環中停止。 – k3davis 2012-03-07 12:24:51

嘗試使用類=「場地」，而不是名字，因爲它是重複的可能調用處理器的2倍。
$('.venue').buttonset().unbind('click').bind('click', function(event, ui) {只被調用一次！

編輯：檢查這一個：因爲buttonset（）的http://jsfiddle.net/Qaxx3/33/

來源

2012-03-07 12:40:34 Vikko

這是一個很好的答案（感謝小提琴更新，因爲我最初並不確定你的意思）。它刪除了按鈕組，但我沒有在我的問題中具體說明這個願望。 – k3davis 2012-03-07 13:57:23

jQuery函數必須重複才能工作

回答

相關問題