[javascript] 동적으로 생성 된 요소에 대한 이벤트 바인딩?

jQuery 1.7부터 다음을 사용해야합니다 jQuery.fn.on.

$(staticAncestors).on(eventName, dynamicChild, function() {});

이 전에 권장되는 접근 방식은 다음을 사용하는 것입니다 live().

$(selector).live( eventName, function(){} );

그러나 live()1.7에서는 더 이상 사용되지 않으며 on()1.9에서는 완전히 제거되었습니다. live()서명 :

$(selector).live( eventName, function(){} );

… 다음 on()서명 으로 대체 할 수 있습니다 .

$(document).on( eventName, selector, function(){} );

예를 들어, 페이지에서 클래스 이름으로 요소를 동적으로 생성 하는 경우 이미 존재하는 상위 항목에dosomething 이벤트를 바인딩 합니다 (여기서는 문제의 핵심이므로 바인딩 할 내용이 필요합니다. 동적 콘텐츠)의 경우 가장 쉬운 옵션은 document입니다. 염두에 두는 document것이 가장 효율적인 방법은 아닙니다 .

$(document).on('mouseover mouseout', '.dosomething', function(){
    // what you want to happen when mouseover and mouseout 
    // occurs on elements that match '.dosomething'
});

이벤트가 바인드 될 때 존재하는 모든 상위는 괜찮습니다. 예를 들어

$('.buttons').on('click', 'button', function(){
    // do something here
});

에 적용

<div class="buttons">
    <!-- <button>s that are generated dynamically and added here -->
</div>

답변

$("#dataTable tbody tr").on("click", function(event){
    console.log($(this).text());
});

$("#dataTable tbody").on("click", "tr", function(event){
    console.log($(this).text());
});

document.addEventListener('click', function (e) {
    if (hasClass(e.target, 'bu')) {
        // .bu clicked
        // Do your thing
    } else if (hasClass(e.target, 'test')) {
        // .test clicked
        // Do your other thing
    }
}, false);

function hasClass(elem, className) {
    return elem.className.split(' ').indexOf(className) > -1;
}

function hasClass(elem, className) {
    return elem.classList.contains(className);
}

var mouseOverHandler = function() {
    // Do stuff
};
var mouseOutHandler = function () {
    // Do stuff
};

$(function() {
    // On the document load, apply to existing elements
    $('select').hover(mouseOverHandler, mouseOutHandler);
});

// This next part would be in the callback from your Ajax call
$("<select></select>")
    .append( /* Your <option>s */ )
    .hover(mouseOverHandler, mouseOutHandler)
    .appendTo( /* Wherever you need the select box */ )
;

function addCallbacks(eles){
    eles.hover(function(){alert("gotcha!")});
}

$(document).ready(function(){
    addCallbacks($(".myEles"))
});

// ... add elements ...
addCallbacks($(".myNewElements"))

$(document.body).on('click','.element', function(e) {  });

 $(document.body).on('click','.element *', function(e) {  });

$(document.body).on('click','.#element_id > element', function(e) {  });