AJAX Calls in MVC Razor View
<p>I just noticed a strange behaviour which I am not quite sure about . I am pretty new to jQuery and AJAX. So might just well be missing some basics.</p>

<p>In my MVC rzaor view there are some AJAX Action links which when clicked render a partial view containing the Student Details in the div #StudentDetails.</p>

<pre><code>    &lt;div id="mainpage"&gt;

    &lt;h2&gt;Registration Details&lt;/h2&gt;
    &lt;ul&gt;
    @foreach(var item in Model) 
    {
        &lt;li&gt;
            @Ajax.ActionLink(item.Student.UserName, @*Text to be displayed *@
            "GetUserDetails", @*Action Method Name*@
            new { id = item.Student.StudentId },
                new AjaxOptions
                {
                    UpdateTargetId = "StudentDetails", @*DOM element ID to be updated *@
                    InsertionMode = InsertionMode.Replace,@*Replace the content of DOM element *@
                    HttpMethod = "GET" @*HTTP method *@,
                    OnComplete="RegisterClickHanders"
                }
            )
        &lt;/li&gt;
    }
    &lt;/ul&gt;
    &lt;div id ="StudentDetails"&gt;&lt;/div&gt;
    &lt;br /&gt;
    &lt;div id ="Add_Update_Details"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>After the view gets rendered with the details, Edit or Add buttons can be clicked and the appropriate partial views get rendered.
<a href="https://i.stack.imgur.com/KEgfO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KEgfO.png" alt="enter image description here"></a></p>

<pre><code>&lt;script&gt;
//Event Delegation
//$(function () {
//One can also use Event Delegation as stated above to handle dynamically added elements i.e. the elements
//that are added after the page is first loaded.
function RegisterClickHanders() {

    var url = '@Url.Action("DisplayClickedView","Private")'; // Name of the action method you want to call and the name of the 
    //controller the action method resides
            $('.editDetails').click(function () {
                var btnvalue = $('.editDetails').attr("value");
                var studentId = $('.editDetails').data("student-id");

                        $('#Add_Update_Details').load(url, { searchText: btnvalue, searchValue: studentId });
            });

            $('.addDetails').click(function () {
                var btnvalue = $('.addDetails').attr("value");

                $('#Add_Update_Details').load(url, { searchText: btnvalue });
            });

}
&lt;/script&gt;
</code></pre>

<p>In my controller when I put my breakpoints :
<a href="https://i.stack.imgur.com/ssx9Z.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ssx9Z.png" alt="enter image description here"></a></p>

<p>they get hit exactly once which is intended. But when I replace the ajax calls as :</p>

<pre><code>        $('.editDetails').click(function () {
        var btnvalue = $('.editDetails').attr("value");
        var studentId = $('.editDetails').data("student-id");

        $.ajax({
            type: 'POST',
            url: url,
            data: { searchText: btnvalue, searchValue: studentId },
            success: function () {
                $('#Add_Update_Details').load(url, { searchText: btnvalue, searchValue: studentId });
            },
            error: function (jqXHR, status, err) {//status is Error and the errorThrown is undefined
                alert('Request Status : ' + jqXHR.status + ' has issued a status text of  : ' + jqXHR.statusText);
            }
        });
    });



    $('.addDetails').click(function () {
        var btnvalue = $('.addDetails').attr("value");

        $.ajax({
            type: 'POST',
            url: url,
            data: { searchText: btnvalue },
            success: function () {
                $('#Add_Update_Details').load(url, { searchText: btnvalue });
            },
            error: function (jqXHR, status, err) {//status is Error and the errorThrown is undefined
                alert('Request Status : ' + jqXHR.status + ' has issued a status text of  : ' + jqXHR.statusText);
            }
        });

    });
</code></pre>

<p>The breakpoints in the controller get hit twice upon pressing any of the buttons . What am I missing ? Or is this intended ? Is AJAX call causing a performance hit ?</p>