如何防止在jQuery中额外的ajax调用？

Question

I have following code in asp.net (MVC) and jquery, where I have following html rendered on browser

<ul style="max-height: 250px; overflow: auto; width: 450px;" id="ulUNNotifications">
    <li>
        <div class="nolink">
            <p style="font-family: sans-serif; font-weight: normal; font-size: 14px; cursor: pointer;">Ticket#<a id="0" href="http://localhost/Web/xxxxx/Manage?TicketID=8310&amp" style="font-weight: normal;">8310</a> has been updated by client via email.</p>
            <p align="right" class="posted">3/18/2015 @ 3:55 PM</p>
        </div>
    </li>
    <li>
        <div class="nolink">
            <p style="font-family: sans-serif; font-weight: bold; font-size: 14px; cursor: pointer;">Ticket#<a id="1" href="http://localhost/Web/xxxxx/Manage?TicketID=8310&amp;">8310</a> has been updated by client via email.</p>
            <p align="right" class="posted">3/18/2015 @ 3:27 PM</p>
        </div>
    </li>
    <li>
        <div class="nolink">
            <p style="font-family: sans-serif; font-weight: normal; font-size: 14px; cursor: pointer;">Ticket#<a id="2" href="http://localhost/Web/xxxxx/Manage?TicketID=8310&amp;" style="font-weight: normal;">8310</a> has been updated by client via email.</p>
            <p align="right" class="posted">3/18/2015 @ 3:21 PM</p>
        </div>
    </li>
</ul>

Now My problem is that when I click on any of anchor tag it is making 3 time ajax call, means if there will 5 <li> then it will make 5 ajax call. I want to prevent extra ajax call.

I want want to make a ajax call for only clicked anchor tag.

I have used below jquery code to do so

$("#ulUNNotifications a:nth-child(1)").each(function (i) {
    var aHre = $(this).attr("href");

    $(this).bind("click", function () {
        $(this).css('font-weight', 'normal');

        fnShowDetails('' + aHre + '', $(this).text());

    });
});

function fnShowDetails(vHref, vticketid) {
    var tempScrollTop = $(window).scrollTop();
    $.ajax({
        url: '@Url.Action("GetDetails", "Tickets")' + '?troubleTicketIdstr=' + vticketid,
        type: "GET",
        success: function (data) {
            $('#dvDetails').css('display', 'block');
            $('#dvDetails').html(data);
            var overlay = jQuery('<div id="overlay"></div>');
            //overlay.appendTo("#dvTicketsDetails");
            $(window).scrollTop(tempScrollTop);
            $(".popup").css("left", (window.screen.width - $('.popup').width()) / 2);
            $(".popup").css("top", (window.innerHeight - $('.popup').height()) / 2);
            $("#dvTicketsDetails").fadeIn('slow');
            // $(".top_bord input[type=text]:first").focus();

        }
    });
    return false;
}

I want ajax call only for anchor tag clicked by user.No need to call for other tags also.

Answer 1

Replace the following code:

$("#ulUNNotifications a:nth-child(1)").each(function (i) {
    var aHre = $(this).attr("href");
    $(this).bind("click", function () {
        $(this).css('font-weight', 'normal');
        fnShowDetails('' + aHre + '', $(this).text());
    });
});

With:

$(document).on("click","#ulUNNotifications a",function(e){
     e.preventDefault();
     $(this).css('font-weight', 'normal');
     var aHre=$(this).attr('href');
     fnShowDetails('' + aHre + '', $(this).text());
});

Answer 2

Do you mean

$(function() {
  $("#ulUNNotifications").find("a").each(function (i) {
    $(this).on("click", function (e) {
       e.preventDefault(); // stop the link
       var aHre = $(this).attr("href");
       $(this).css('font-weight', 'normal');
       fnShowDetails(aHre, $(this).text());
    });
  });
});