클릭 이벤트가 동적으로 생성된 요소에서 작동하지 않음
<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()사용 중인 바인딩을 "직접" 바인딩이라고 합니다. 이 바인딩은 처리기를 이미 존재하는 요소에만 연결합니다.앞으로 생성된 요소에 구속되지 않습니다.이렇게 하려면 를 사용하여 "위임된" 바인딩을 만들어야 합니다.
위임된 이벤트는 나중에 문서에 추가되는 하위 요소의 이벤트를 처리할 수 있다는 장점이 있습니다.
다음은 당신이 찾고 있는 것입니다.
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+를 사용하는 사용자에게 적용됩니다.이전 버전을 사용하는 경우 아래의 이전 답변을 참조하십시오.
이전 답변:
사용해 보십시오.
$("button").click(function(){
$("h2").html("<p class='test'>click me</p>")
});
$(".test").live('click', function(){
alert('you clicked me!');
});
나를 위해 일했습니다.jsFiddle과 함께 시도했습니다.
또는 다음과 같은 새로운 방법으로 수행할 수 있습니다.
$("h2").delegate("p", "click", function(){
alert('you clicked me again!');
});
업데이트된 jsFiddle입니다.
$('#staticParent').on('click', '.dynamicElement', function() {
// Do something on an existent or future .dynamicElement
});
이 메서드를 사용하면 원하는 이벤트 처리기를 다음 작업에 위임할 수 있습니다.
현재 요소 또는 미래 요소가 나중에 DOM에 추가됩니다.
사용하지 마세요..live() 1에서 jQuery 1.7+서.live()메서드가 더 이상 사용되지 않습니다.
이유:
jQuery에서 () event Directbinding을 클릭하면 특정 요소(Html 코드)가 페이지에 존재하는 경우에만 요소에 이벤트 핸들러를 연결할 수 있습니다(페이지 로드 후).
동적 요소는 html이 아닌 javascript 또는 jquery의 도움을 받아 생성됩니다.
페이지가 로드된 후에 작성되는 미래 요소(동적)는 고려하지 않습니다.
따라서 일반적인 클릭 이벤트는 동적 요소에서 발생하지 않습니다.
솔루션:
이를 극복하려면 on() 함수를 사용해야 합니다. on()은 현재 요소와 미래 요소 모두에 대해 이벤트를 위임할 수 있습니다.
위임된 이벤트에는 처리기를 나중에 문서에 추가할 요소에 연결할 수 있는 이점이 있습니다.
참고: delegate(), live() 및 on() 기능은 DOM 요소보다 장점이 있습니다.JQuery 1.7 이후에는 대리자() 및 라이브()가 더 이상 사용되지 않습니다(사용하지 마십시오).
on()만 현재 요소와 미래 요소 모두에 대해 이벤트를 위임할 수 있습니다.
그래서, 당신의 코드는 다음과 같아야 합니다.
$(문서)에서 코드를 제거합니다.준비:
$(".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+를 사용하는 경우 .on을 사용합니다.
$(".test").on("click", "p", function(){
alert();
});
ㅠㅠ.live()또는.delegate()
http://api.jquery.com/delegate/
당신의..test는 요가다추습니다었가 되었습니다..click()메소드, 그래서 이벤트가 첨부되지 않았습니다.Live(라이브) 및 Delegate(위임)는 이벤트 트리거를 부모 요소에 제공하여 자식 요소를 확인하므로 나중에 추가된 모든 항목은 계속 작동합니다.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 ).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가 개체 .test의 직접 상위인 경우에만 작동합니다.
div에 채워질 다른 개체가 있으면 작동하지 않습니다.
문제는 "test" 클래스를 이벤트에 바인딩하려고 시도하는 것입니다. 이벤트에 "test" 클래스가 있는 항목이 있습니다.DOM비록 이것이 모두 역동적인 것처럼 보일 수 있지만, 실제로 일어나고 있는 것입니다.JQuery을 무시합니다.DOM 클릭 합니다.ready()버튼 이벤트에서 "클릭 미"를 만들기 전에 발생하는 함수가 실행됩니다.
"test" 클릭 이벤트를 "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그리고 그 안에 있는 요소들이 바뀔 때마다 물건들을 다시 만듭니다.
일부 컨테이너 또는 본문에 대한 동적으로 추가된 링크가 있는 경우:
var newLink= $("<a></a>", {
"id": "approve-ctrl",
"href": "#approve",
"class": "status-ctrl",
"data-attributes": "DATA"
}).html("Its ok").appendTo(document.body);
원시 Javascript 요소를 가져와서 클릭과 같은 이벤트 수신기를 추가할 수 있습니다.
newLink.get(0).addEventListener("click", doActionFunction);
새이 새 링 인 스 턴 를 를 도 라 더 사 jquery 있 니 습 다 수 할 용 사 럼 것 처 는 하 용 하 크 추 스 나 가 번 이 몇 ▁a ▁using ▁if ▁you ▁you ▁ ▁no ▁it 다 니 습 이 ▁link ▁as qu ▁new있▁use ▁where qu▁j▁this▁can를수 ▁add ery ery새▁times할▁you용사럼▁many크click기능.
function doActionFunction(e) {
e.preventDefault();
e.stopPropagation();
alert($(this).html());
}
그래서 당신은 다음과 같은 메시지를 받을 것입니다.
괜찮아.
다른 대안보다 성능이 우수합니다.
추가: jquery를 피하고 일반 자바스크립트를 사용하여 더 나은 성능을 얻을 수 있습니다.버전 8까지 IE를 사용하는 경우 이 폴리필을 사용하여 방법을 사용해야 합니다.addEventListener
if (typeof Element.prototype.addEventListener === 'undefined') {
Element.prototype.addEventListener = function (e, callback) {
e = 'on' + e;
return this.attachEvent(e, callback);
};
}
IMHO(대체 및 보다 간결한 대안)는 클릭 시 이벤트에 응답하는 원시 자바스크립트 함수를 사용한 다음 원하는 경우 대상 요소를 jQuery로 다시 전달하는 것입니다.이 접근 방식의 장점은 어디서나 동적으로 요소를 추가할 수 있고 클릭 핸들러가 '그냥 작동'하므로 상위 요소에 제어 권한을 위임하는 등의 작업을 수행할 필요가 없다는 것입니다.
1단계: 동적 html을 업데이트하여 클릭 시 이벤트를 발생시킵니다.'event' 개체를 인수로 전달해야 합니다.
$("버튼").클릭(함수: {})$("h2")."test<p class='test' on click='test(event)'> 나를 클릭 </p>)"});
2단계: 클릭 이벤트에 대응하는 테스트 기능을 만듭니다.
함수 테스트(e){alert »;});
옵션 3단계: jQuery를 사용하고 있는 경우 소스 버튼에 대한 참조를 다시 얻는 것이 유용할 것으로 생각합니다.
함수 테스트(e){alert »;
버튼에 대한 참조를 가져옵니다.이 라인에 대한 설명은 여기에서 사용할 수 있습니다.var target = (예: target)?e.target : e.srcElement;
버튼 참조를 jQuery에 전달하여 jQuery 마법 수행var $btn = $(대상);
});
.live 기능이 잘 작동합니다.
스테이지에 동적으로 추가된 요소를 위한 것입니다.
$('#selectAllAssetTypes').live('click', function(event){
alert("BUTTON CLICKED");
$('.assetTypeCheckBox').attr('checked', true);
});
건배, 앤킷
제이쿼리.on정상적으로 작동하지만 위의 솔루션 중 일부를 구현하는 렌더링에 문제가 있었습니다.을 .on그것은 어떻게든 그것이 사건들을 다른 방식으로 해석하고 있었다는 것입니다..hover방법.
문제가 있을 수도 있는 다른 사람들을 위해 fyi.동적으로 추가된 항목에 대한 호버 이벤트를 다시 등록하여 문제를 해결했습니다.
동적으로 생성된 항목에 대해 호버가 작동하지 않으므로 호버 이벤트를 다시 등록합니다.그래서 내가 새/동적인 항목을 만들 때마다 호버 코드를 다시 추가합니다.완벽하게 작동합니다.
$('#someID div:last').hover(
function() {
//...
},
function() {
//...
}
);
테이블에서 새로운 요소를 동적으로 추가하는 작업을 수행하고 있으며, ()에 사용할 때 동적이지 않은 상위 항목을 다음과 같이 사용하는 것이 유일한 방법입니다.
<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()를 사용하고, 이벤트를 한 번 사용하려면 하나()를 사용할 수 있으므로 이 기능은 매우 유용합니다.
저는 라이트박스(작은 박스)에서 디브 작업을 하기 위해 라이브나 위임을 받을 수 없었습니다.
다음과 같은 간단한 방법으로 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)" 요소
클릭하면 동적으로 생성된 요소에 추가할 수 있습니다.아래의 예.언제를 사용하여 완료되는지 확인합니다.이 예에서는 클래스가 확장된 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');
})
이것이 도움이 될 것입니다.
언급URL : https://stackoverflow.com/questions/6658752/click-event-doesnt-work-on-dynamically-generated-elements
'programing' 카테고리의 다른 글
| 포스트그레스가 배열에 없음 (0) | 2023.05.08 |
|---|---|
| nvm을 사용하여 npm 버전을 변경하려면 어떻게 해야 합니까? (0) | 2023.05.08 |
| linq를 사용하여 고유 선택 (0) | 2023.05.08 |
| Interlocked의 과부하가 없는 이유는 무엇입니까?Double을 매개 변수로 허용하는 추가? (0) | 2023.05.08 |
| 날짜 시간 대 날짜 시간 오프셋 (0) | 2023.05.08 |