jquery에서 'a'태그의 클릭 이벤트

Question

"deletable"클래스에있는 "a"태그의 클릭 이벤트를 트리거해야합니다. 그래서 비슷한 질문을 봤지만, 다음 코드는 나를 위해 작동하지 않습니다. 내가 뭘 하려는지 관련 <li><ul>에서 삭제하는 것입니다.

$(document).ready(function() { 
     $('.deletable').live("click", function() { 
     alert("test"); // Debug 
     // Code to remove this <li> from <ul> 
    }); 
    }); 

<form ...> 
    <ul> 
     <li>One<a href="#" class="deletable">Delete</a></li> 
     <li>Two<a href="#" class="deletable">Delete</a></li> 
     <li>Three<a href="#" class="deletable">Delete</a></li> 
    </ul> 
</form> 

나는 $('...') 태그 안에 잘못된 개체 계층 구조를 사용하고 있다고 가정합니다. 하지만이 문제를 해결하기에 충분한 js/jquery/DOM 지식이 없습니다. 도와주세요.

편집

답변을 주셔서 감사합니다,하지만 그들 중 누구도 나를 위해 작동하지 않습니다. 사실 나는 동적으로 <li>을 추가하고 있습니다. 어쩌면 문제가있을 수 있습니다. ,

#sps을 확인하시기 바랍니다 - 목록 상자 #add - 버튼 #splist - 다른 목록 상자 #remove - 당신이 $('a.deletable') 선택기를 사용할 수있는 버튼

$(document).ready(function() { 
     $('#add').click(function(e) { 
      var selectedOpts = $('#sps option:selected'); 
      if (selectedOpts.length == 0) { 
       alert("Nothing to move."); 
       e.preventDefault(); 
      } 

      $('#splist').append($(selectedOpts).clone()); 
      $('ul').append('<li>' + selectedOpts.text() + '<a href="#" class="deletable" id="id' + selectedOpts.val() + '">Remove</a>' + '</li>'); 
      e.preventDefault(); 
     }); 

     $('#remove').click(function(e) { 
      var selectedOpts = $('#splist option:selected'); 
      if (selectedOpts.length == 0) { 
       alert("Nothing to move."); 
       e.preventDefault(); 
      } 

      $(selectedOpts).remove(); 
      e.preventDefault(); 
     }); 

    }); 

Answer 1

.live() jQuery 메서드는 더 이상 사용되지 않습니다.

$('body').on('click', '.deletable', function(e){ 
    e.preventDefault(); 
    // this is the li that was clicked 
    $(this).parent().remove(); 
}); 

에서 preventDefault 방법은 href 속성에서 대상 뭔가가 있어야 새로운 페이지를로드에서 링크를 유지하는 데 사용됩니다 : 당신은 $('body')를 사용하고 난 다음 코드처럼 .deletable에 위임 비슷한 기능을 얻을 수 있습니다. 귀하의 예제에서와 동일한 HTML 구조를 유지한다면 앵커 요소 (this)를 가져 와서 부모를 잡고 DOM에서 제거하면됩니다.

$('body')을 사용하는 대신 삭제 가능한 앵커 (이 경우 $('ul'))의 컨테이너를 대상으로 지정하는 것이 좋습니다. 이 기능은 다음과 같을 것이다 :

$('ul').on('click', '.deletable', function(e){ 
    e.preventDefault(); 
    // this is the li that was clicked 
    $(this).parent().remove(); 
}); 

가 $('body') 페이지의 모든 이벤트가 그것이 .deletable 앵커에서 유래 있는지 확인하기 위해 필터링되어야 할 것이다 것을 의미한다 사용. 리의 앞에있는 ul으로 범위를 지정하면 함수의 성능 향상 횟수가 제한됩니다.

Answer 2

을 ...이 클래스 deletable와 <a> 찾습니다.

u는 너무 .. 여기 위임 이벤트에 통과 할 수는 있습니다 .. docs

이 <li> 동적으로 추가됩니다 당신이

$('a.deletable').on("click",function(){ 
    alert("test"); // Debug 
    // Code to remove this <li> from <ul> 
    $(this).parent("li").remove(); 
}); 

경우 경우에 시도이다

$(document).on("click",'a.deletable',function(){ .... //even more better if u replace the document with closest elements to a.deletable ..like $(form) 

live() 양보하다 ..

Answer 3

$('a.deletable').live("click",function(){ 
    alert("test"); // Debug 
    $(this).parent('li').remove(); 
}); 

Answer 4

몇 가지 사항 : jQuery 1.9를 사용하는 경우 .live() 함수는 더 이상 지원되지 않습니다.이전 버전에서는 특정 기능이 으로 대체되었으므로은 사용되지 않으므로 사용하지 마십시오.

그 말은 올바른 구문에 대한 것입니다. 그래서 그것은 틀린 처리기 함수 내부의 계층이라고 가정합니다.

는 부모 <li>을 삭제하려는 경우이 같은

뭔가 일을해야 는 : 당신이 정말로 대리인의 서명으로 그것을 확인하려면

$('.deletable').on('click', function (e) { 
    // since you're working with a link, it may be doing wonky default browser stuff 
    // so disable that for now 
    e.preventDefault(); 

    // then we delete the parent li here: 
    $(this).parent('li').remove(); 
}); 

,이 같은 작업을해야합니다 :

$('form').on('click', '.deletable', function (e) { 
    // same banana 
});