2010-08-18 3 views
4

내가 JQuery와 클릭 기능을 가진 prblem의 비트를 보내고있어, 아래의 내 코드의 레이아웃의 일부입니다 일기 - 이벤트 몸에 -title와 텍스트는 모두 동적으로 생성하고있는 클래스의 일 - 메인 일기 '그것이합니다 (JS 파일에 실제 코드에 바인딩 클릭 기능을 가지고 :최우선 JQuery와 .click() 함수

$('.day-main-diary').click(function(){ 
    // Code is here 
} 

나는 '삭제'ID가 포함 된 범위에서 클릭 이벤트가 발생하는 방식을 찾고 있습니다. 아베는

$('.day-main-diary #delete').click(function(){ 

및 그러나

$('#delete').click(function(){ 

, 완전히이 이벤트를 무시하고 항상 일 메인 일기 클릭 이벤트를 호출 할 때마다 시도했다.

아무도 도와 줄 수 있습니까? 나는 영원히 위대 할 것입니다 -Matt

+0

'span # delete'의 크기는 어느 정도입니까? – Nalum

답변

4

먼저 페이지에 #delete ID가 하나만있을 수 있다는 것을 기억하십시오. 둘 이상인 경우 문제가 생겨 클래스 .delete이되어야합니다.

페이지가로드 될 때 #delete 요소가없는 경우 .live()을 사용할 수 있습니다. 그러면 요소를 추가 할 때마다 이벤트 처리가 처리됩니다.

$('#delete').live('click', function(){ 
      ... 
}); 

그러나 그이 것입니다 여전히 의 화재 .day-main-diary의 이벤트도 있습니다.

다른 옵션은 .day-main-diary (페이지가로드 될 때까지)에 .delegate()을 호출하는 것입니다. 이것은 .live()과 비슷하지만보다 현지화되어 있습니다.

$('.day-main-diary').delegate('#delete', 'click', function() { 
     ... 
}); 

이렇게하면 .day-main-diary에있는 click이 발생합니다. 예상되는 동작이 무엇인지 확실하지 않습니다.

  • http://api.jquery.com/delegate/
  • http://api.jquery.com/live/

    • 는 또 다른 옵션은 .day-main-diary 클릭 처리기에서 클릭의 e.target을 테스트하는 것입니다. #delete 일 경우 한 가지만하고 그렇지 않은 경우 수행하십시오. 당신이 그것을 만들 때
      $('.day-main-diary').click(function(e) { 
          if(e.target.id === 'delete') { 
           // run code for the delete button 
          } else { 
           // do something else 
          } 
      }); 
      

      그렇지 않으면, 여전히 #delete 동적라고 가정하면, 당신은 .click()을 바인딩 할 수 있습니다.

      $('<span id="delete">delete</span>').click(function(e) { 
           // your code 
           // uncomment the line below if you don't want the 
           // click event to fire on .day-main-diary as well 
           // e.stopPropagation() 
      }) 
      .appendTo('day-main-diary'); 
      
    +0

    당신이 만든 편집은 e.target을 사용하여 멋지게 작동했습니다. thanks : – Matt

    +0

    @Matt - 오신 것을 환영합니다. :영형) – user113716