동적으로 생성 된 요소에 작동하지 않는 이벤트를 클릭 [중복]

해결법

1.클릭 () 사용중인 바인딩은 이미 존재하는 요소에 핸들러를 첨부 할 바인딩 "직접"을이라고합니다. 그것은 미래에 생성 된 요소에 바인딩되지 않습니다. 그렇게하려면, 당신은에 사용하여 바인딩 "위임"을 만들어야합니다 ().

클릭 () 사용중인 바인딩은 이미 존재하는 요소에 핸들러를 첨부 할 바인딩 "직접"을이라고합니다. 그것은 미래에 생성 된 요소에 바인딩되지 않습니다. 그렇게하려면, 당신은에 사용하여 바인딩 "위임"을 만들어야합니다 ().

출처

여기에 당신이 찾고있는 무엇 :

VAR 카운터 = 0; $ ( "버튼"). ((클릭 기능) { $ ( "H2"). APPEND (+ (+ + 카운터) "
저를 클릭"+ "") }); 에 //와 () : $ ( "H2"). ( "p.test"기능을 "클릭"에 () { 경고 ($ (이)는 .text ()); }); <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
<버튼> 새로운 요소를 생성

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.
2.위임 된 이벤트와 CSTE 연구진 () 메소드를 사용하여

위임 된 이벤트와 CSTE 연구진 () 메소드를 사용하여
```
$('#staticParent').on('click', '.dynamicElement', function() {
    // Do something on an existent or future .dynamicElement
});
```
CSTE 연구진 () 메서드를 사용하면 원하는 이벤트 핸들러를 위임 할 수 있습니다 : 현재 요소 또는 미래의 요소는 나중에 DOM에 추가됩니다.

P.S : 음주) (.live 사용하지! jQuery를 1.7+에서 .live () 메소드가 사용되지 않습니다.
3.이유:

이유:

jQuery를에서 특정 요소 (페이지가로드 후) HTML 코드에 존재하는 경우에만 () 이벤트 바인딩 요소를 클릭합니다.

동적으로 생성되는 미래 요소 (미래의 요소)를 고려하지 않을 것이다. 동적 요소가 자바 스크립트 또는 JQuery와 (하지 HTML의)의 도움으로 생성된다.

일반적인 클릭 이벤트는 동적 요소에 발생하지 않도록.

해결책 :

이 문제를 극복하기 위해 우리는 () 함수를 사용해야합니다.

위임 (), 라이브 ()와 ()를 함수는 DOM의 요소를 장점이있다.

위임 (), 라이브 ()는 (음주 다음을 사용하지 않음) 사용되지 않습니다.

만 모두 기존 및 미래의 요소를 트리거 할 수 있습니다.

에 전체 페이지에있는 모든 요소를 고려할 수 있습니다.

동적 (미래) 생성 요소에 이벤트를 트리거 기능을 사용해야합니다.

.ready $ (문서)에서 코드를 제거합니다 :
```
$(".test").click(function(){

  alert();

});
```
로 변경:
```
$(document).on('click','.test',function(){

  alert('Clicked');

});
```
4.당신의 js 파일에이 기능을 추가합니다. 그것은 모든 브라우저에서 작동합니다

당신의 js 파일에이 기능을 추가합니다. 그것은 모든 브라우저에서 작동합니다

() {(기능 $ $ (문서) CSTE 연구진 (,, 기능을 '#mydiv'을 '클릭'() { 경고 ( "당신은 단지에 클릭 한"); }); }); <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 본부

5.변화

변화

 $(".test").click(function(){

에

 $(".test").live('click', function(){

jQuery를 .live ()

6.당신은 일이에 대한 .live 사용합니다 :

당신은 일이에 대한 .live 사용합니다 :
```
$(".test").live("click", function(){
   alert();
});
```
또는 당신이 JQuery와 1.7+ 사용 CSTE 연구진를 사용하는 경우 :
```
$(".test").on("click", "p", function(){
   alert();
});
```
7.() (.live 시도) 또는 .delegate

() (.live 시도) 또는 .delegate

http://api.jquery.com/live/

http://api.jquery.com/delegate/

그것이 연결된 이벤트가 없었어요 그래서 .test 요소는 .click () 메소드 이후에 추가되었다. 이후 여전히 추가 아무것도 작동 있도록 라이브 및 대리인은 자녀를 확인 부모 요소에 해당 이벤트 트리거를 제공합니다. 위임이 요소에 부여 할 수있는 동안 나는, 전체 문서 본문을 확인합니다 라이브 생각, 그래서 위임이 더 효율적입니다.

더 많은 정보:

http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/
8.내가 jQuery의 문서에서이 개 솔루션을 발견 :

내가 jQuery의 문서에서이 개 솔루션을 발견 :

첫째 : 사용은 신체 또는 문서에 위임

예컨대 :
```
 $("body").delegate('.test', 'click', function(){
 ...
  alert('test');
 });
```
왜?

답변 : 루트 요소의 특정 설정을 기반으로, 현재 또는 미래에, 셀렉터와 일치하는 모든 요소에 대해 하나 개 이상의 이벤트에 핸들러를 연결합니다. 링크 : http://api.jquery.com/delegate/

둘째 : "에서"사용하여 "$ (문서)"에서 함수를 넣고이를 실행하려는 요소에 연결합니다. 소자 및 제 : 함수 제 매개 변수는 "이벤트 핸들러", 제이다. 예컨대 :
```
 $( document ).on( 'click', '.test', function () {
 ...
  alert('test');
 });
```
왜?

답변 : 이벤트 핸들러는 현재 선택된 요소에 바인딩; 그들은 당신의 코드 CSTE 연구진에 호출 할 때 페이지에 있어야합니다 (). 요소가 존재하고 선택할 수, 페이지의 HTML 태그에있는 요소에 대한 문서 준비 핸들러 내부 바인딩 이벤트를 수행 할 수 있도록합니다. 새 HTML 페이지에 주입되는 경우, 요소를 선택하고 새로운 HTML이 페이지에 배치 한 후 이벤트 핸들러를 연결합니다. 또는 사용은 다음에 설명 된 바와 같이, 이벤트 핸들러를 연결하는 이벤트를 위임 ... 링크 : https://api.jquery.com/on/
9.위임을 사용하여 동적으로 생성 된 내용에 이벤트를 적용하는 가장 좋은 방법.

위임을 사용하여 동적으로 생성 된 내용에 이벤트를 적용하는 가장 좋은 방법.
```
$(document).on("eventname","selector",function(){
    // code goes here
});
```
코드는 지금과 같이 그래서
```
$(document).on("click",".test",function(){
    // code goes here
});
```
10.
```
$(.surrounding_div_class).on( 'click', '.test', function () {
alert( 'WORKS!' );
});
```
에만 작업 클래스 .surrounding_div_class와 DIV 객체의 .test에 바로 위 부모 인 경우

작동 실 거예요 채워집니다 사업부의 다른 개체가있는 경우.
11.당신이 가진 문제는 당신이 DOM에서 "테스트"클래스 아무것도가되기 전에 이벤트에 "테스트"클래스를 바인딩을 시도하고 있다는 점이다. 그것은 다음과 같이 보일 수 있지만 모든 동적이며, 정말 JQuery와 사용자가 만든 전에 어떻게 준비 () 함수를 해고 클릭 이벤트, 최대 DOM 및 전선을 통해 패스를 만드는 것입니다 무슨 일이 일어나고 있는지 당신의 버튼 이벤트 "나를 클릭" .

당신이 가진 문제는 당신이 DOM에서 "테스트"클래스 아무것도가되기 전에 이벤트에 "테스트"클래스를 바인딩을 시도하고 있다는 점이다. 그것은 다음과 같이 보일 수 있지만 모든 동적이며, 정말 JQuery와 사용자가 만든 전에 어떻게 준비 () 함수를 해고 클릭 이벤트, 최대 DOM 및 전선을 통해 패스를 만드는 것입니다 무슨 일이 일어나고 있는지 당신의 버튼 이벤트 "나를 클릭" .

"테스트"를 추가하여 올바른 요소가 DOM에 존재 한 후 그것을 묶을 것 "버튼을 '클릭 핸들러에 이벤트를 클릭합니다.
```
<script type="text/javascript">
    $(document).ready(function(){                          
        $("button").click(function(){                                  
            $("h2").html("<p class='test'>click me</p>")                          
            $(".test").click(function(){                          
                alert()                          
            });       
        });                                     
    });
</script>
```
사용 라이브 () (다른 사람은 지적으로)이 작업을 수행하는 또 다른 방법입니다하지만 또한 당신의 JS 코드에서 사소한 오류를 지적하는 좋은 아이디어 느꼈다. 당신이 쓴 것은 단지 올바르게 범위 될 필요가 잘못되지 않았습니다. DOM에와 JS의 작동 방식을 파악하는 것은 자신의 머리 주위를 감싸는 많은 전통적인 개발자를위한 까다로운 것들 중 하나입니다.

) (라이브이 대부분의 경우를 처리 할 수있는 청소기 방법은 갈 수있는 올바른 방법이다. 그것은 본질적으로 그 안에 요소가 변경 될 때마다 DOM 다시 배선 일을 지켜보고있다.

12..live 기능은 잘 작동합니다.

.live 기능은 잘 작동합니다.

동적으로 스테이지에 요소를 추가 된 것이다.

$('#selectAllAssetTypes').live('click', function(event){
                    alert("BUTTON CLICKED");
                    $('.assetTypeCheckBox').attr('checked', true);
                });

건배, ANKIT.

13.JQuery와 CSTE 연구진은이 작품을 좋아하지만 위의 솔루션의 일부를 구현하는 렌더링 몇 가지 문제가 있었다. CSTE 연구진를 사용하여 내 문제는 어떻게 든이 .hover 방법과 다르게 이벤트를 렌더링 한 것입니다.

JQuery와 CSTE 연구진은이 작품을 좋아하지만 위의 솔루션의 일부를 구현하는 렌더링 몇 가지 문제가 있었다. CSTE 연구진를 사용하여 내 문제는 어떻게 든이 .hover 방법과 다르게 이벤트를 렌더링 한 것입니다.

그냥 참고하시기 바랍니다 다른 사람을 위해 그 또한 문제가있을 수 있습니다. 나는 동적으로 추가 된 항목에 대한 호버 이벤트를 재 - 등록하여 내 문제를 해결 :

호버가 동적으로 생성 된 항목에 대해 작동하지 않기 때문에 호버 이벤트를 다시 등록합니다. 그래서 난 새로운 /의 동적 항목을 만들 때마다 난 다시 호버 코드를 추가합니다. 완벽하게 작동
```
$('#someID div:last').hover(
    function() {
       //...
    },
    function() {
       //...
    }
);
```

14.나는 라이브 얻거나 라이트 박스 (tinybox)의 사업부에 작업을 위임 할 수 있습니다.

나는 라이브 얻거나 라이트 박스 (tinybox)의 사업부에 작업을 위임 할 수 있습니다.

나는 다음과 같은 간단한 방법으로, 성공적으로의 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());
    })
}

15.또한 당신은 = "do_something (이)"내부 요소를 onclick을 사용할 수 있습니다

또한 당신은 = "do_something (이)"내부 요소를 onclick을 사용할 수 있습니다
16.당신은 어떤 용기 또는 신체에 동적으로 추가 링크가있는 경우 :

당신은 어떤 용기 또는 신체에 동적으로 추가 링크가있는 경우 :
```
var newLink= $("<a></a>", {
        "id": "approve-ctrl",
        "href": "#approve",
        "class": "status-ctrl",
        "data-attributes": "DATA"
    }).html("Its ok").appendTo(document.body);
```
당신은 원시 자바 스크립트 요소를 가지고 클릭처럼, 거기에 이벤트 리스너를 추가 할 수 있습니다 :
```
newLink.get(0).addEventListener("click", doActionFunction);
```
JQuery와 클릭 기능을 사용하여 어디 것처럼 아무리 당신이 새로운 링크 인스턴스를 추가 얼마나 많은 시간을 당신은 그것을 사용할 수 없습니다.
```
function doActionFunction(e) {
    e.preventDefault();
    e.stopPropagation();

    alert($(this).html());
}
```
당신이 말하는 메시지가 나타납니다 그래서

그것은 다른 대안보다 더 나은 성능을 가지고있다.

추가 : 당신은 jQuery를 피하고 일반 자바 스크립트를 사용하여 더 나은 성능을 얻을 수 있습니다. 당신은 버전 8로 IE를 사용하는 경우는 메소드하여 addEventListener를 사용하려면이 polyfill을 사용해야합니다
```
if (typeof Element.prototype.addEventListener === 'undefined') {
    Element.prototype.addEventListener = function (e, callback) {
      e = 'on' + e;
      return this.attachEvent(e, callback);
    };
  }
```
17.같은 당신이 경우 클릭 이벤트에 대한 응답은 다음 jQuery를에 대상 요소에 다시 전달하는 것이 또 다른 더 간결 대안 (IMHO)는 원시 자바 스크립트 함수를 사용하는 것입니다. 이 방법의 장점은 동적 요소의 어느 곳을 추가 할 수 있으며, 클릭 처리기 것입니다 그냥 일 ', 당신은 그래서 부모 요소에 대한 제어를 위임하고,과 우려 자신을 필요는 없다.

같은 당신이 경우 클릭 이벤트에 대한 응답은 다음 jQuery를에 대상 요소에 다시 전달하는 것이 또 다른 더 간결 대안 (IMHO)는 원시 자바 스크립트 함수를 사용하는 것입니다. 이 방법의 장점은 동적 요소의 어느 곳을 추가 할 수 있으며, 클릭 처리기 것입니다 그냥 일 ', 당신은 그래서 부모 요소에 대한 제어를 위임하고,과 우려 자신을 필요는 없다.

1 단계 : 업데이트 동적 HTML이 온 클릭 이벤트가 발생합니다. 인수로 '이벤트'개체를 전달해야합니다
```
    $("button").click(function() {
        $("h2").html("<p class='test' onclick='test(event)'> click me </p>")
    });
```
2 단계 : 클릭 이벤트에 응답 할 수있는 테스트 기능 만들기
```
    function test(e){
        alert();
    });
```
옵션 3 단계 : 나는 그것을 소스 버튼에 대한 참조를 다시 얻을 도움이 될 것입니다 있으리라 믿고있어 당신이 jQuery를 사용하는 감안할 때
```
    function test(e){
        alert();

        // Get a reference to the button
        // An explanation of this line is available here
        var target = (e.target)? e.target : e.srcElement;

        // Pass the button reference to jQuery to do jQuery magic
        var $btn = $(target);

    });
```
18.나를 비 동적 부모 등을 사용하는 것이 작동 만드는 () 유일한 방법에 사용할 때 그들에게 동적으로 새로운 요소를 추가 테이블로 작업하고 있어요 :

나를 비 동적 부모 등을 사용하는 것이 작동 만드는 () 유일한 방법에 사용할 때 그들에게 동적으로 새로운 요소를 추가 테이블로 작업하고 있어요 :
```
<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>
```
이에와 바인딩 이벤트를 제거하기 위해, 정말 유용하기 때문에 ()이다, 당신은) (오프 사용할 수 있으며, 한 번 이벤트를 사용하려면 사용할 수있는 하나의 ().
19.당신은 동적으로 생성 된 요소에 클릭에 추가 할 수 있습니다. 예 아래. 때를 사용하면 확인의 완료를 확인합니다. 내 예제에서 나는 원래 사업부를 보여 / 다음 숨기기에 그 범위를 사용하여, 폭 "을 더 보려면 클릭하십시오"를 추가, 클래스와 사업부 확장 잡는거야.

당신은 동적으로 생성 된 요소에 클릭에 추가 할 수 있습니다. 예 아래. 때를 사용하면 확인의 완료를 확인합니다. 내 예제에서 나는 원래 사업부를 보여 / 다음 숨기기에 그 범위를 사용하여, 폭 "을 더 보려면 클릭하십시오"를 추가, 클래스와 사업부 확장 잡는거야.
```
$.when($(".expand").before("<span class='clickActivate'>Click to see more</span>")).then(function(){
    $(".clickActivate").click(function(){
        $(this).next().toggle();
    })
});
```
20.같은 클릭 '에'사용은 이미 존재하는 요소에 결합됩니다.

같은 클릭 '에'사용은 이미 존재하는 요소에 결합됩니다.

에 대한 예 :
```
$('test').on('click',function(){
    alert('Test');
})
```
이 도움이 될 것입니다.

from https://stackoverflow.com/questions/6658752/click-event-doesnt-work-on-dynamically-generated-elements by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 합니까 ID는 전체 페이지에서 고유해야? (0)	2020.09.21
[JQUERY] jQuery를 모바일 : 문서 준비 대 페이지 이벤트 (0)	2020.09.21
[JQUERY] 브라우저 또는 탭 폐쇄 감지 (0)	2020.09.21
[JQUERY] 나는 같은 페이지에 jQuery를 여러 버전을 사용할 수 있습니까? (0)	2020.09.21
[JQUERY] .ready $ (문서) VS 위해 window.onload () (0)	2020.09.21

복붙노트

[JQUERY] 동적으로 생성 된 요소에 작동하지 않는 이벤트를 클릭 [중복]

동적으로 생성 된 요소에 작동하지 않는 이벤트를 클릭 [중복]

해결법

1.클릭 () 사용중인 바인딩은 이미 존재하는 요소에 핸들러를 첨부 할 바인딩 "직접"을이라고합니다. 그것은 미래에 생성 된 요소에 바인딩되지 않습니다. 그렇게하려면, 당신은에 사용하여 바인딩 "위임"을 만들어야합니다 ().

2.위임 된 이벤트와 CSTE 연구진 () 메소드를 사용하여

3.이유:

4.당신의 js 파일에이 기능을 추가합니다. 그것은 모든 브라우저에서 작동합니다

5.변화

6.당신은 일이에 대한 .live 사용합니다 :

7.() (.live 시도) 또는 .delegate

8.내가 jQuery의 문서에서이 개 솔루션을 발견 :

9.위임을 사용하여 동적으로 생성 된 내용에 이벤트를 적용하는 가장 좋은 방법.

10.

12..live 기능은 잘 작동합니다.

13.JQuery와 CSTE 연구진은이 작품을 좋아하지만 위의 솔루션의 일부를 구현하는 렌더링 몇 가지 문제가 있었다. CSTE 연구진를 사용하여 내 문제는 어떻게 든이 .hover 방법과 다르게 이벤트를 렌더링 한 것입니다.

14.나는 라이브 얻거나 라이트 박스 (tinybox)의 사업부에 작업을 위임 할 수 있습니다.

15.또한 당신은 = "do_something (이)"내부 요소를 onclick을 사용할 수 있습니다

16.당신은 어떤 용기 또는 신체에 동적으로 추가 링크가있는 경우 :

18.나를 비 동적 부모 등을 사용하는 것이 작동 만드는 () 유일한 방법에 사용할 때 그들에게 동적으로 새로운 요소를 추가 테이블로 작업하고 있어요 :

20.같은 클릭 '에'사용은 이미 존재하는 요소에 결합됩니다.

'JQUERY' 카테고리의 다른 글

티스토리툴바