将click事件绑定到具有特定类名的div中的所有链接

Question

在document.ready中调用jquery的第一部分是伪代码。如何正确执行$（'。mainLink'）。each（）。click（），以便在NavigationPanel内部具有类名mainLinks的所有链接都绑定到click事件。不使用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);
        }
    });
});