ajax 호출 후 jQuery 클릭 기능이 작동하지 않습니까?

ajax 호출 후 jQuery 클릭 기능이 작동하지 않습니까?

---

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

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

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()이벤트 핸들러를 등록하는 데 사용 하면 코드가 실행될 때 dom에 존재하는 요소에만 핸들러를 추가합니다.

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

$(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요소 트리 를 확인해야하는 범위를 줄이고 효율성을 높일 수 있습니다.

FIDDLE 데모

---

여기 FIDDLE

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

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

---

I tested a simple solution that works for me! My javascript was in a js separate file. What I did is that I placed the javascript for the new element into the html that was loaded with ajax, and it works fine for me! This is for those having big files of javascript!!

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