jQuery 클릭이 동적으로 생성된 항목에 대해 작동하지 않습니다.

jQuery 클릭이 동적으로 생성된 항목에 대해 작동하지 않습니다.

이 질문에는 이미 다음과 같은 답이 있습니다.

동적으로 생성된 요소에 대한 이벤트 바인딩? (23개 답변)

마감됨8년 전에.

(주진의 div각요순소 jQuery 있각습다조니이는하환어)의 각 요소를 순환하는 한 조각을 가지고 .#container범위를 클릭할 때마다 Javascript 경보를 실행합니다.이것은 다음과 같은 경우에 잘 작동합니다.<span>는 정적입니다.

그러나 다음과 같은 코드를 사용하는 경우:

$(someLink).click(function(){
   $("#container").html( <new html with new spans> )
});

jQuery 코드가 실행되지 않습니다.하지만 이상하게도.

질문: 동적으로 생성된 항목에 대해 내 클릭 이벤트가 작동하지 않는 이유가 있습니까?이벤트를 연결하려면 준비된 문서 또는 하트비트 스크립트(100밀리초마다 실행됨)에 무언가를 추가해야 합니까?

수행할 작업:

 $( '#wrapper' ).on( 'click', 'a', function () { ... })

 $( 'body'     ).on( 'click', '.your_dynamic_elem_css_selector', function () { ... })  # use body as wrapper static elem

#wrapper는 동적 링크를 추가하는 정적 요소입니다.

HTML 소스 코드로 하드 코딩된 래퍼가 있습니다.

<div id="wrapper"></div>

역동적인 콘텐츠로 채워집니다.동적 요소에 직접 핸들러를 바인딩하는 대신 이벤트를 해당 래퍼에 위임하는 것입니다.

---

그나저나 Backbone.js를 추천합니다. 이 프로세스는 다음과 같은 구조를 제공합니다.

var YourThing = Backbone.View.extend({

    // the static wrapper (the root for event delegation)
    el: $( '#wrapper' ),

    // event bindings are defined here 
    events: {
        'click a': 'anchorClicked'
    },

    // your DOM event handlers
    anchorClicked: function () {
        // handle click event 
    }

});

new YourThing; // initializing your thing

출처: 이 게시물

자바스크립트를 사용하여 동적으로 요소를 생성한 경우 이 코드는 작동하지 않습니다.왜냐하면 .click()은 이미 존재하는 요소에 이벤트를 첨부하기 때문입니다.Javascript를 사용하여 동적으로 요소를 생성하므로 작동하지 않습니다.

이를 위해 동적으로 생성된 요소에서 작동하는 다른 함수를 사용해야 합니다.이 작업은 여러 가지 방법으로 수행할 수 있습니다.

이전에는 .live() 함수가 있습니다.

$('selector').live('click', function()
{
//your code
});

그러나 .live()는 더 이상 사용되지 않습니다.다른 기능으로 대체할 수 있습니다.

대리자():

대리자() 함수를 사용하여 동적으로 생성된 HTML 요소를 클릭할 수 있습니다.

예:

$(document).delegate('selector', 'click', function()
{
 //your code
});

편집: 대리자() 메서드는 버전 3.0에서 더 이상 사용되지 않습니다.대신 on() 메서드를 사용합니다.

ON():

on() 함수를 사용하여 동적으로 생성된 HTML 요소를 클릭할 수 있습니다.

예:

$(document).on('click', 'selector', function()
{
// your code
});

다음과 같은 것을 시도해 보십시오.

$("#container").on('click', 'someLinkSelector', function(){ $("#container").html( <new html with new spans> ) });

동적으로 생성된 요소를 감시할 수 있도록 기본적으로 DOM의 비동적인 부분에서 이벤트를 첨부해야 합니다.

클릭 이벤트를 기존 요소에 추가해야 합니다.동적으로 생성된 돔 요소에 이벤트를 추가할 수 없습니다.이벤트를 추가하려면 "on"을 사용하여 이벤트를 기존 요소에 바인딩해야 합니다.

$('p').on('click','selector_you_dynamic_created',function(){...});

.vmdk도 작동합니다.

$("#container").delegate("span", "click", function (){
    alert(11);
});

사용..click이벤트는 이미 존재하는 요소에만 첨부됩니다.

동적으로 생성된 이벤트를 모니터링하는 기능을 사용해야 합니다. 이전 버전의 JQuery에서는 이 기능이 사용되었습니다..live()하지만 이것은 에 의해 대체되었습니다.

저는 며칠 전에 이 문제에 직면했습니다. 해결책은 .bind()를 사용하여 동적으로 생성된 링크에 필요한 함수를 바인딩하는 것이었습니다.

var catLink = $('<a href="#" id="' + i + '" class="lnkCat">' + category.category + '</a>');
catLink.bind("click", function(){
 $.categories.getSubCategories(this);
});

getSubCategories : function(obj) {
 //do something
}

이것이 도움이 되길 바랍니다.

1.7.1의 새로운 jQuery 기능 사용 -

http://api.jquery.com/on/

언급URL : https://stackoverflow.com/questions/9484295/jquery-click-not-working-for-dynamically-created-items