클릭 이벤트가 동적으로 생성 된 요소에서 작동하지 않음
이 질문에는 이미 답변이 있습니다.
- 동적으로 생성 된 요소에 대한 이벤트 바인딩? 답변 23 개
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$("h2").html("<p class='test'>click me</p>")
});
$(".test").click(function(){
alert();
});
});
</script>
</head>
<body>
<h2></h2>
<button>generate new element</button>
</body>
</html>
나는 클래스 이름으로 새 태그를 생성하기 위해 노력했다 test에서이 <h2>버튼을 클릭하여. 또한와 관련된 클릭 이벤트를 정의했습니다 test. 그러나 이벤트가 작동하지 않습니다.
누구든지 도울 수 있습니까?
click()만 요소 핸들러를 첨부 할 바인딩 "직접"라고 사용하는 바인딩 이 이미 존재 . 미래에 만들어진 요소에 구속되지 않습니다. 그렇게하려면을 사용하여 "위임 된"바인딩을 만들어야합니다 on().
위임 된 이벤트는 나중에 문서에 추가 된 하위 요소의 이벤트를 처리 할 수 있다는 이점이 있습니다.
찾고있는 내용은 다음과 같습니다.
var counter = 0;
$("button").click(function() {
$("h2").append("<p class='test'>click me " + (++counter) + "</p>")
});
// With on():
$("h2").on("click", "p.test", function(){
alert($(this).text());
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<h2></h2>
<button>generate new element</button>위의 jQuery 버전 1.7 이상을 사용하는 사람들을 위해 작동합니다. 이전 버전을 사용하는 경우 아래의 이전 답변을 참조하십시오.
이전 답변 :
사용해보십시오 live():
$("button").click(function(){
$("h2").html("<p class='test'>click me</p>")
});
$(".test").live('click', function(){
alert('you clicked me!');
});
나를 위해 일했다. jsFiddle로 시도했습니다 .
또는 다음과 같은 새로운 방법이 있습니다 delegate().
$("h2").delegate("p", "click", function(){
alert('you clicked me again!');
});
$('#staticParent').on('click', '.dynamicElement', function() {
// Do something on an existent or future .dynamicElement
});
이 .on()메소드를 사용하면 원하는 이벤트 핸들러를
현재 요소 또는 나중에 DOM에 추가 된 미래 요소 에 위임 할 수 있습니다 .
추신 : 사용하지 마십시오 .live()! jQuery 1.7 .live()이상 에서는이 메소드가 더 이상 사용되지 않습니다.
이유:
jQuery에서 Click ()-은 요소가 html 코드에 이미 존재하는 경우에만 이벤트 핸들러를 연결합니다.
페이지가로드 된 후 동적으로 생성되는 새 요소 (미래 요소)는 고려하지 않습니다.
동적 요소는 javascript 또는 jquery (html이 아님) 의 도움으로 작성됩니다 .
클릭 이벤트가 발생하지 않습니다.
해결책 :
이를 극복하기 위해서는 on () 함수를 사용해야 합니다.
delegate (), live () 및 on () 함수는 DOM 요소보다 장점이 있습니다.
on 은 기존 요소와 미래 요소를 모두 트리거 할 수 있습니다.
에는 전체 페이지의 모든 존재하는 요소를 고려할 수 있습니다.
delegate (), live () 함수는 사용되지 않습니다 (사용하지 마십시오).
동적으로 작성된 (미래) 요소에서 이벤트를 트리거 하려면 on 함수를 사용해야 합니다.
$ (document) .ready에서 코드를 제거하십시오.
$(".test").click(function(){
alert();
});
로 변경:
$(document).on('click','.test',function(){
alert('Clicked');
});
이 기능을 js 파일에 추가하십시오. 모든 브라우저에서 작동합니다
$(function() {
$(document).on("click", '#mydiv', function() {
alert("You have just clicked on ");
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='mydiv'>Div</div>변화
$(".test").click(function(){
에
$(".test").live('click', function(){
라이브 데모
이것이 작동 하려면 .live 를 사용해야 합니다.
$(".test").live("click", function(){
alert();
});
또는 당신이 JQuery와 1.7+ 사용 사용하는 경우 CSTE 연구진를 :
$(".test").on("click", "p", function(){
alert();
});
시도 .live()또는.delegate()
http://api.jquery.com/delegate/
귀하의 .test요소는 후에 추가 된 .click()그것에 연결된 이벤트가 없었어요, 그래서 방법. 라이브 및 델리게이트는 하위 요소를 확인하는 상위 요소에 해당 이벤트 트리거를 제공하므로 이후에 추가 된 항목은 여전히 작동합니다. Live는 문서 본문 전체를 확인하고 Delegate는 요소에 제공 할 수 있으므로 Delegate가 더 효율적이라고 생각합니다.
더 많은 정보:
http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/
jQuery 문서에서 두 가지 솔루션을 찾았습니다.
첫 번째 : 본문 또는 문서에 대리인 사용
예 :
$("body").delegate('.test', 'click', function(){
...
alert('test');
});
왜?
답변 : 특정 루트 요소 집합을 기반으로 현재 또는 향후 선택기와 일치하는 모든 요소에 대해 하나 이상의 이벤트에 처리기를 연결하십시오. 링크 : http://api.jquery.com/delegate/
둘째 : "on"을 사용 하여 함수를 "$ (document) "에 넣고이를 트리거하려는 요소에 연결하십시오. 첫 번째 매개 변수는 "이벤트 핸들러"이고 두 번째 매개 변수는 요소이고 세 번째 매개 변수는 함수입니다. 예 :
$( document ).on( 'click', '.test', function () {
...
alert('test');
});
왜?
답변 : 이벤트 핸들러는 현재 선택된 요소에만 바인딩됩니다. 코드가 .on ()을 호출 할 때 페이지에 존재해야합니다 . 요소가 존재하고 선택 될 수 있도록하려면 페이지의 HTML 마크 업에있는 요소에 대해 문서 준비 핸들러 내에서 이벤트 바인딩을 수행하십시오. 새 HTML이 페이지에 삽입되는 경우 새 HTML이 페이지에 배치 된 후 요소를 선택하고 이벤트 핸들러를 첨부하십시오. 또는 다음 설명과 같이 위임 된 이벤트를 사용하여 이벤트 핸들러를 연결하십시오. 링크 : https://api.jquery.com/on/
위임을 사용하여 동적으로 생성 된 콘텐츠에 이벤트를 적용하는 가장 좋은 방법입니다.
$(document).on("eventname","selector",function(){
// code goes here
});
이제 코드는 다음과 같습니다
$(document).on("click",".test",function(){
// code goes here
});
$(.surrounding_div_class).on( 'click', '.test', function () {
alert( 'WORKS!' );
});
.surrounding_div_class 클래스의 DIV가 객체의 직접적인 부모 인 경우에만 작동합니다.
div에 채워질 다른 객체가 있으면 작동하지 않습니다.
문제는에 "test"클래스가있는 항목이 있기 전에 "test"클래스를 이벤트에 바인딩하려고한다는 것입니다 DOM. 이 모든 동적 인 것처럼 보일 수 있지만, 정말로 일어나고있는 것은 JQuerya를 통해 통과하게 DOM하여 클릭 이벤트 최대 전선 ready()당신이 당신의 버튼 이벤트 "나를 클릭"만들기 전에 발생 기능 해고를.
"test"Click 이벤트를 "button"클릭 핸들러에 추가하면에 올바른 요소가 존재하면 이벤트가 연결됩니다 DOM.
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("h2").html("<p class='test'>click me</p>")
$(".test").click(function(){
alert()
});
});
});
</script>
사용 live()(다른 사람들이 지적으로) 또 다른 방법입니다 것은이 작업을 수행하지만 또한 당신의 JS 코드에서 사소한 오류를 지적하는 좋은 아이디어하다고 생각합니다. 당신이 쓴 것은 잘못이 아니며, 정확하게 범위를 지정해야했습니다. DOM과 JS가 어떻게 작동 하는지 파악하는 것은 많은 전통적인 개발자들이 머리를 감쌀 까다로운 작업 중 하나입니다.
live()이 문제를 처리하는 더 깔끔한 방법이며 대부분의 경우 올바른 방법입니다. 본질적으로 DOM요소가 변경 될 때마다 것을 보고 다시 배선합니다.
.live 기능이 훌륭하게 작동합니다.
스테이지에 동적으로 추가 된 요소를위한 것입니다.
$('#selectAllAssetTypes').live('click', function(event){
alert("BUTTON CLICKED");
$('.assetTypeCheckBox').attr('checked', true);
});
건배, Ankit.
Jquery .on는 정상적으로 작동하지만 위의 솔루션 중 일부를 구현하는 렌더링에 문제가 있습니다. 를 사용하는 내 문제 .on는 어떻게 든 이벤트와 .hover메소드를 다르게 렌더링한다는 것 입니다.
문제가있을 수있는 다른 사람을 위해 피하십시오. 동적으로 추가 된 항목에 대한 호버 이벤트를 다시 등록하여 문제를 해결했습니다.
호버가 동적으로 작성된 항목에 대해 작동하지 않으므로 호버 이벤트를 다시 등록하십시오. 그래서 새로운 / 동적 항목을 만들 때마다 호버 코드를 다시 추가하십시오. 완벽하게 작동
$('#someID div:last').hover(
function() {
//...
},
function() {
//...
}
);
라이트 박스 (tinybox)의 div에서 작업하거나 라이브로 위임 할 수 없었습니다.
다음과 같은 간단한 방법으로 setTimeout을 성공적으로 사용했습니다.
$('#displayContact').click(function() {
TINY.box.show({html:'<form><textarea id="contactText"></textarea><div id="contactSubmit">Submit</div></form>', close:true});
setTimeout(setContactClick, 1000);
})
function setContactClick() {
$('#contactSubmit').click(function() {
alert($('#contactText').val());
})
}
또한 onclick="do_something(this)"내부 요소를 사용할 수 있습니다
일부 컨테이너 또는 본문에 링크가 크게 추가 된 경우 :
var newLink= $("<a></a>", {
"id": "approve-ctrl",
"href": "#approve",
"class": "status-ctrl",
"data-attributes": "DATA"
}).html("Its ok").appendTo(document.body);
raw javascript 요소를 가져 와서 click 과 같이 이벤트 리스너를 추가 할 수 있습니다 .
newLink.get(0).addEventListener("click", doActionFunction);
이 새 링크 인스턴스를 몇 번 추가하더라도 jquery click함수를 사용하는 것처럼 사용할 수 있습니다 .
function doActionFunction(e) {
e.preventDefault();
e.stopPropagation();
alert($(this).html());
}
그래서 당신은 말하는 메시지를 받게됩니다
괜찮아
다른 대안보다 성능이 좋습니다.
추가 : jquery를 피하고 일반 자바 스크립트를 사용하여 더 나은 성능을 얻을 수 있습니다. IE를 버전 8까지 사용하는 경우이 폴리 필을 사용하여 메소드를 사용해야합니다.addEventListener
if (typeof Element.prototype.addEventListener === 'undefined') {
Element.prototype.addEventListener = function (e, callback) {
e = 'on' + e;
return this.attachEvent(e, callback);
};
}
대안적이고 간결한 대안 (IMHO)은 on click 이벤트에 응답하는 원시 javascript 함수를 사용하고 원하는 경우 대상 요소를 jQuery에 다시 전달하는 것입니다. 이 접근 방식의 장점은 요소를 어디서나 동적으로 추가 할 수 있으며 클릭 핸들러가 '작동'하는 것이므로 부모 요소에 제어 권한을 위임하는 것에 대해 걱정할 필요가 없습니다.
1 단계 : 클릭시 이벤트가 발생하도록 동적 HTML을 업데이트합니다. 'event'객체를 인수로 전달하십시오
$ ( "button"). click (function () {
$ ( "h2"). html ( "<p class = ' test'onclick = 'test (event)' > 나를 클릭하십시오 </ p>")
});
2 단계 : 클릭 이벤트에 응답하는 테스트 기능 만들기
기능 테스트 (e) {
경보();
});
선택적 3 단계 : jQuery를 사용하고 있다고 가정하면 소스 버튼에 대한 참조를 얻는 것이 유용하다고 가정합니다.
기능 테스트 (e) {
경보();
// 버튼에 대한 참조를 얻습니다
//이 줄에 대한 설명은 여기에서 볼 수 있습니다
var target = (e.target)? e.target : e.srcElement;
// jQuery 매직을 수행하기 위해 버튼 참조를 jQuery에 전달
var $ btn = $ (대상);
});
새 요소를 동적으로 추가하는 테이블로 작업하고 있으며 on ()을 사용할 때 작동하는 유일한 방법은 비 동적 부모를 다음과 같이 사용하는 것입니다.
<table id="myTable">
<tr>
<td></td> // Dynamically created
<td></td> // Dynamically created
<td></td> // Dynamically created
</tr>
</table>
<input id="myButton" type="button" value="Push me!">
<script>
$('#myButton').click(function() {
$('#myTable tr').append('<td></td>');
});
$('#myTable').on('click', 'td', function() {
// Your amazing code here!
});
</script>
on ()으로 바인딩 된 이벤트를 제거 하려면 off () 를 사용하고 이벤트를 한 번 사용하려면 one ()을 사용할 수 있기 때문에 이것은 정말 유용합니다 .
클릭하면 동적으로 생성 된 요소를 추가 할 수 있습니다. 아래 예. When를 사용하여 완료했는지 확인하십시오. 내 예에서는 클래스 확장으로 div를 잡고 "더보기 위해 클릭하십시오"스팬을 추가 한 다음 해당 범위를 사용하여 원래 div를 숨기거나 표시합니다.
$.when($(".expand").before("<span class='clickActivate'>Click to see more</span>")).then(function(){
$(".clickActivate").click(function(){
$(this).next().toggle();
})
});
클릭이 이미 존재하는 요소에 바인딩 될 때 'on'을 사용하십시오.
예를 들어
$('test').on('click',function(){
alert('Test');
})
도움이 될 것입니다.
'Programing' 카테고리의 다른 글
| Xcode 4에서 NSZombieEnabled를 어떻게 설정합니까? (0) | 2020.02.16 |
|---|---|
| Xcode 5에서 프로비저닝 프로파일 메뉴 항목이 누락 됨 (0) | 2020.02.16 |
| 두 개의 dicts를 결합하는 파이썬적인 방법이 있습니까 (둘 다에 나타나는 키 값 추가)? (0) | 2020.02.16 |
| Bash 스크립트에서 OS를 감지하는 방법은 무엇입니까? (0) | 2020.02.16 |
| 이진 문자열에 파이썬 int? (0) | 2020.02.16 |