特定のクラス名を持つdiv内のすべてのリンクにclickイベントをバインドします

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

はちょうどあなたがdivのID NavigationPanel内のすべてのリンクをしたい場合は、単にバインドしたい場合は、その後、下記の

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

Answer 2

を試すクラス.mainLink

持つすべてのリンクをバインドする必要があります$('.mainLink').click(function (e) {を行いますすべて.mainLink以内#NavigationPanel、次の作品：

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