특정 클래스 이름을 가진 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

모든 링크를 결합한다 $('.mainLink').click(function (e) {,

$('.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); 
     } 
    }); 
});