ajax 호출 후 jQuery 클릭 기능이 작동하지 않습니까?
이 질문에 이미 답변이 있습니다.
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
귀하의 코드와 동일하지만 동적으로 생성 된 요소에서 작동합니다.
$(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
'Development Tip' 카테고리의 다른 글
Chrome에서 고정 요소가 사라짐 (0) | 2020.11.02 |
---|---|
iOS에 키보드가 나타나면 UIView를 위로 이동 (0) | 2020.11.02 |
Visual Studio 2012 설치 실패 : 프로그램 호환성 모드가 켜져 있습니다. (0) | 2020.11.02 |
Prim과 Dijkstra의 알고리즘의 차이점은 무엇입니까? (0) | 2020.11.02 |
Android 인앱 결제 : 다른 비동기 작업 (진행 중)으로 인해 비동기 작업을 시작할 수 없습니다. (0) | 2020.11.02 |