jQuery click event on <a> fires twice
asp.net-mvc-4, jquery
Solution
I think you may be missing a return false at the end of the function. Without it the browser will also to the a click.
Problem
I have a click event that is being called twice and I can't figure out why. Razor/Html: ``` <li class="active"> <a href="#" class="listitem">@Model[i].Name</a> <span style="display:none" class="id">@Model[i].ID</span> </li> ``` ^ This is inside of a `for` loop containing multiple list items. JQuery: ``` $(".listitem").on("click", function () { var id = $(this).siblings("span").html(); $.ajax({ url: '@Url.Action("SelectItem", "Home")', type: "POST", data: $("#form").serialize() + "&id=" + id, success: function (result) { $('#partialView').html(result); } }); }); ``` ^ To handle click of a list item. Ajax call to my controller refreshes the partial view. My `js` is contained in the partial view and refreshes but I don't understand why it would cause this event to be called twice (usually the id is `undefined` the second time). Maybe I'm just making a simple mistake that I'm not seeing? I know there are many questions on click events being called twice, but I think my situation may be different enough to warrant a question. I also haven't seen many great answers.