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="" /> 

你不需要全功能的东西。