jQuery click 기능이 Ajax 호출 후 작동하지 않습니까?

jQuery click 기능이 Ajax 호출 후 작동하지 않습니까?

이 질문에는 이미 답변이 있습니다.

동적으로 생성된 요소에 대한 이벤트 바인딩? (23개 답변)

닫힘6년 전에요.

여기서 jQuery 클릭 기능은 정상적으로 작동합니다.

<div id="LangTable"><a class="deletelanguage">delete</a></div>    

$('.deletelanguage').click(function(){
    alert("success");
});

하지만 만약 내가 몇 가지 설정을 한다면<a>에이잭스,$('.deletelanguage').click동작하지 않습니다.

예를들면

function CreateRow(jdata) { 
    $('#LangTable').append('<a class="deletelanguage">delete</a>');
}

$.ajax({        
    url: "/jobseeker/profile/",
    success: CreateRow
});

자, 이제.$('.deletelanguage').click마지막으로<a>동작하지 않습니다.

jsfiddle의 예:http://jsfiddle.net/suhailvs/wjqjq/

주의: 여기서 CSS는 정상적으로 동작합니다.

나는 이것들을 새로 붙이고 싶다.<a>jQuery 클릭으로 작업합니다.

문제는 .click이 페이지에 이미 있는 요소에 대해서만 작동한다는 것입니다.이런 걸 써야 돼요.on미래 요소를 배선하는 경우

$("#LangTable").on("click",".deletelanguage", function(){
  alert("success");
});

사용할 때$('.deletelanguage').click()이벤트 핸들러를 등록하려면 코드 실행 시 돔에 존재하는 요소에만 핸들러를 추가합니다.

여기서 위임 기반 이벤트 핸들러를 사용해야 합니다.

$(document).on('click', '.deletelanguage', function(){
    alert("success");
});

$('body').delegate('.deletelanguage','click',function(){
    alert("success");
});

또는

$('body').on('click','.deletelanguage',function(){
    alert("success");
});

클래스는 동적으로 추가되므로 이벤트 위임을 사용하여 다음과 같이 이벤트핸들러를 등록해야 합니다.

$('#LangTable').on('click', '.deletelanguage', function(event) {
    event.preventDefault();
    alert("success");
});

이 조작에 의해서, 이 이벤트가, 이하의 임의의 앵커에 부가됩니다.#LangTable요소, 전체 검사 범위를 줄입니다.document요소 트리와 효율성이 향상됩니다.

바이올린 데모

여기 FILDLE이거기서

코드와 동일하지만 동적으로 생성된 요소에서 작동합니다.

$(document).on('click', '.deletelanguage', function () {
    alert("success");
    $('#LangTable').append(' <br>------------<br> <a class="deletelanguage">Now my class is deletelanguage. click me to test it is not working.</a>');
});

클릭 이벤트는 이벤트가 정의된 지점에 존재하지 않습니다.라이브 또는 위임 이벤트를 사용할 수 있습니다.

$('.deletelanguage').live('click',function(){
    alert("success");
    $('#LangTable').append(' <br>------------<br> <a class="deletelanguage">Now my class is deletelanguage. click me to test it is not working.</a>');
});

나에게 맞는 간단한 솔루션을 테스트했습니다!나의 Javascript는 js의 별도 파일에 있었다.제가 한 일은 새로운 요소의 javascript를 ajax가 로딩된 html에 넣었는데, 저는 잘 작동합니다!javascript의 큰 파일을 가지고 계신 분들을 위한 것입니다!!

언급URL : https://stackoverflow.com/questions/17715274/jquery-click-function-doesnt-work-after-ajax-call