Onclick事件需要點擊兩次？

Question

爲什麼我必須在背景顏色設置爲綠色之前點擊兩次？

這是我的JavaScript：

function OnGroupClicked(groupId) { 
    var groupIds = new Array(); 
    $("#group-name-" + groupId).on("click", function() { 
    var body = $('#group-name-div' + groupId), 
    green = "rgb(0, 128, 0)", 
    white = "rgb(255, 255, 255)"; 

    if (body.css("background-color") !== green) { 
     $('#hidden' + groupId).val(1); 
     body.css("background-color", green); 
    } else { 
     $('#hidden' + groupId).val(0); 
     body.css("background-color", white); 
    } 
    }); 
} 

這是我的標記：

foreach (var group in Model.AllGroups) {  
    if (Model.GroupsForUser.Any(g => g.GroupId == group.GroupId)) { %> 
     <div id="group-name-div<%: group.GroupId %>" style="width:auto; height:50px; border:solid 1px black; margin:5px; background-color:green;" > 
      <h3>&nbsp; &nbsp; <a href="javascript:OnGroupClicked(<%: group.GroupId %>)" id="group-name-<%: group.GroupId %>"><%: group.Name %></a></h3> 
     </div> 
     <input type="hidden" id="hidden<%: group.GroupId %>" name="group-hidden<%: group.GroupId %>" value="" /> 
    <% } else { %> 
     <div id="group-name-div<%: group.GroupId %>" style="width:auto; height:50px; border:solid 1px black; margin:5px;" > 
      <h3>&nbsp; &nbsp; <a href="javascript:OnGroupClicked(<%: group.GroupId %>)" id="group-name-<%: group.GroupId %>"><%: group.Name %></a></h3> 
     </div> 
     <input type="hidden" id="hidden<%: group.GroupId %>" name="group-hidden-<%: group.GroupId %>" value="" /> 
    <% } 
} %> 

Answer 1

你是第一個宣佈在第一次點擊的事件處理程序，不燒成。

爲了進一步解釋，當您單擊鏈接時運行OnGroupClicked函數，這會添加事件偵聽器，但不會觸發它。

爲了解決這個問題，在元素上附加事件，並使用this來知道被點擊的元素。

你可以做這樣的事情：

$(".changeColor").on("click", function() { 
var body = $(this).closest('group-name-div'), 
    green = "rgb(0, 128, 0)", 
    white = "rgb(255, 255, 255)"; 

if (body.css("background-color") !== green) { 
    body.next('input').val(1); 
    body.css("background-color", green); 
} else { 
    body.next('input').val(0); 
    body.css("background-color", white); 
} 
}); 

的MVC標記：

<div class="group-name-div" id="group-name-div<%: group.GroupId %>"> 
    <h3><a href="#" class="changeColor"><%: group.Name %></a></h3> 
</div> 
<input type="hidden" id="hidden<%: group.GroupId %>" name="group-hidden<%: group.GroupId %>" value="" /> 

你不需要全功能的東西。