Geek asks and answers

JQuery click event on <a> fires twice

I have a click event that fires twice, and I cannot understand why.

Razors / 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 a loop forcontaining 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);
        }
    });
});

^ Process click on a list item.

Ajax call of my controller updates a partial view. My is jscontained in a partial view and is updated, but I do not understand why this event is fired twice (usually this is the id a undefinedsecond time). Maybe I'm just making a simple mistake that I don't see?

I know that there are many questions about calls that are called twice, but I think that my situation may be different enough to ask a question. I also have not seen many great answers.

+3
source
2

, false. a.

+10

, script , . script . click , click, .

$(document).on('click', '.listitem', function(){ ...

,

, , 1. ,

data: { form: $('#form').serialize(), id: id },

,

+3

More articles:


All Articles