새로 추가 된 dom 요소에 바인딩되지 않는 jQuery 함수
여기 있습니다 index.html:
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.btn_test').click(function() { alert('test'); });
});
function add(){
$('body').append('<a href=\'javascript:;\' class=\'btn_test\'>test</a>');
}
</script>
</head>
<body>
<a href="javascript:;" class="btn_test">test1</a>
<a href="javascript:;" onclick="add()">add</a>
</body>
내가 클릭하면 test1링크가 표시됩니다 alert('test'),하지만 난을 클릭하면 add다음의 링크를 클릭합니다 test, 그것은 아무것도 표시되지 않습니다.
설명해 주시겠습니까?
2011 년 이후에이 질문을하는 사용자를 위해 새로운 적절한 방법이 있습니다.
$(document).on('click', '.btn_test', function() { alert('test'); });
이것은 jQuery 1.7 기준입니다.
자세한 내용은 직접 및 위임 이벤트를 참조하십시오.
처음에는 단일 요소 만 존재하므로 "실시간"클릭 리스너를 사용해야합니다.
$('.btn_test').live("click", function() {
alert('test');
});
업데이트 : 라이브는 더 이상 사용되지 않으므로 "on ()"을 사용해야합니다.
$(".btn_test").on("click", function(){
alert("test");
});
나는 내 머리카락을 당기기 직전의 질문과 같은 문제가 있었고 해결책을 얻었습니다. 나는 다른 구문을 사용하고 있었다
$(".innerImage").on("click", function(){
alert("test");
});
그것은 나를 위해 작동하지 않았습니다 (innerImage는 동적으로 생성됩니다) 이제 사용하고 있습니다.
$(document).on('click', '.innerImage', function() { alert('test'); });
감사합니다 @Moshe Katz
.click은 현재 jQuery에 표시되는 항목에 바인딩됩니다. .live를 사용해야합니다.
$('.btn_test').live('click', function() { alert('test'); });
대신 Jquery live 를 사용하십시오 . 여기에 대한 도움말 페이지가 있습니다. http://api.jquery.com/live/
$('.btn_test').live(function() { alert('test'); });
편집 : live()더 이상 사용되지 않으며 on()대신 사용해야 합니다.
$(".btn_test").on("click", function(){
alert("test");
});
클릭 이벤트는 바인딩시 기존 요소에만 바인딩되기 때문입니다. 이벤트를 페이지의 기존 및 향후 요소에 바인딩하는 live 또는 delegate를 사용해야합니다.
$('.btn_test').live("click", function() { alert('test'); });
클릭 대신 라이브 리스너 가 필요합니다 .
$('.btn_test').live('click', function() {
alert('test');
});The reason being is that the click only assigns the listener to elements when the page is loading. Any new elements added will not have this listener on them. Live adds the click listener to element when the page loads and when they are added afterwards
When the document loads you add event listeners to each matching class to listen for the click event on those elements. The same listener is not automatically added to elements that you add to the Dom later.
Because the event is tied to each matching element in the document ready. Any new elements added do NOT automatically have the same events tied to them.
You will have to manually bind the event to any new element, after it is added, or use the live listener.
$('.btn_test').click
will add the handler for elements which are available on the page (at this point 'test' does not exist!)
you have to either manually add a click handler for this element when you do append, or use a live event handler which will work for every element even if you create it later..
$('.btn_test').live(function() { alert('test'); });
After jquery 1.7 on method can be used and it really works nice
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").on("click",function(){
alert("The paragraph was clicked.");
$("body").append("<p id='new'>Now click on this paragraph</p>");
});
$(document).on("click","#new",function(){
alert("On really works.");
});
});
</script>
</head>
<body>
<p>Click this paragraph.</p>
</body>
</html>
see it in action http://jsfiddle.net/rahulchaturvedie/CzR6n/
Or just run the script at the end of your page
You need to add a proper button click function to give a proper result
$("#btn1").live(function() { alert("test"); });
참고URL : https://stackoverflow.com/questions/6537323/jquery-function-not-binding-to-newly-added-dom-elements
'Development Tip' 카테고리의 다른 글
| Facebook 앱에서와 같이 프로그래밍 방식으로 설정을 여는 방법은 무엇입니까? (0) | 2020.10.17 |
|---|---|
| iPhone xib를 iPad xib로 변환 하시겠습니까? (0) | 2020.10.17 |
| 파생 클래스가 수퍼 메서드를 호출하도록 강제하는 방법은 무엇입니까? (0) | 2020.10.17 |
| Rails가 현재 설치되어 있지 않다고 계속 알려줍니다. (0) | 2020.10.17 |
| while 루프를 사용하지 않고 가장 안쪽의 예외를 찾으십니까? (0) | 2020.10.17 |