asp.net-mvc - 将click事件绑定到具有特定类名的div中的所有链接

Question

document.ready 中 jquery 调用的第一部分是伪代码。如何正确执行 $('.mainLink').each().click() 以便 NavigationPanel 中类名称 mainLinks 的所有链接都绑定到单击事件。不使用 id 作为链接是不是很糟糕？

$(document).ready(function () {

        $('.mainLink').each().click(function (e) {
                e.preventDefault();                
                $.ajax({
                    url: this.href,
                    beforeSend: OnBegin,
                    complete: OnComplete,
                    success: function (html) {
                        $('#ContentPanel').html(html);
                    }
                });
            });
        });  

<div id="NavigationPanel">  

        @Html.ActionLink("1", "Index", "First", null, new { @class = "mainLink" })
        @Html.ActionLink("2", "Index", "Two", null, new { @class = "mainLink"  })
        @Html.ActionLink("3", "Index", "Three", null, new { @class = "mainLink" })    
    </div>

Answer 1

只需做$('.mainLink').click(function (e) {应该将所有链接与类绑定.mainLink

如果您想要 div ID 中的所有链接，请NavigationPanel尝试以下操作，

$('.mainLink', $('#NavigationPanel')).click(function (e) {

Answer 2

如果您只想绑定到.mainLink内的所有内容#NavigationPanel，则可以使用以下方法：

$("#NavigationPanel").on("click", ".mainLink", function(e){
    e.preventDefault();                
    $.ajax({
        url: this.href,
        beforeSend: OnBegin,
        complete: OnComplete,
        success: function (html) {
            $('#ContentPanel').html(html);
        }
    });
});