복붙노트

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

JQUERY

동적으로 생성 된 요소에 바인딩 이벤트?

해결법

  1. 1.jQuery를 1.7로서 당신은 가득 선택 매개 변수와 함께 jQuery.fn.on를 사용한다 :

    jQuery를 1.7로서 당신은 가득 선택 매개 변수와 함께 jQuery.fn.on를 사용한다 :

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

    설명:

    다음으로이 작업은 이벤트 위임 및 작품이라고합니다. 해당 이벤트가 처리되어야하는 요소의 정적 부모 (staticAncestors)에 부착된다. 이 jQuery를 핸들러마다이 요소 또는 하위 요소 중 하나의 이벤트 트리거를 트리거됩니다. 검사 후 핸들러는 이벤트를 트리거 요소는 당신의 선택 (dynamicChild)과 일치합니다. 경기가있을 때 다음 사용자 정의 핸들러 함수가 실행됩니다.

    이에 앞서, 권장되는 방법은 () 라이브 사용하는 것이 었습니다 :

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

    그러나 라이브는 () ()에 찬성 1.7에서 사용되지 않습니다, 완전히 1.9에서 제거. 라이브 () 서명 :

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

    ... ()가 서명에 다음으로 대체 할 수있다 :

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

    페이지가 동적으로 해봐요 클래스 이름을 가진 요소를 만드는 경우 예를 들어, 당신은하지 바인딩에, 이미 당신이 바인딩에 존재하는 뭔가가 필요, 여기에 문제의 요점입니다 (존재하는 부모에 이벤트를 바인딩 할 것 동적 내용)이 될 수있다 (그리고 가장 쉬운 옵션) 문서입니다. 마음 문서의 곰은 가장 효율적인 옵션이되지 않을 수도 있지만.

    $(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>

  2. 2.jQuery.fn.on의 문서에서 좋은 설명이있다.

    jQuery.fn.on의 문서에서 좋은 설명이있다.

    한마디로 :

    코드가 생성되기 전에 따라서 다음 예에서 #dataTable TBODY 그럴 필요가 있어야합니다.

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

    새 HTML 페이지에 주입하는 경우, 다음에 설명 된 바와 같이, 이벤트 핸들러를 첨부 위임 이벤트를 사용하는 것이 바람직하다.

    위임 된 사건은 나중에 문서에 추가되는 하위 요소의 이벤트를 처리 할 수있는 장점이 있습니다. 테이블이 존재하지만 행이 코드를 사용하여 동적으로 추가하는 경우 예를 들어, 다음을 처리합니다 :

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

    아직 생성되지 않은 하위 요소에 대한 이벤트를 처리 할 수있는 능력뿐만 아니라, 위임 사건의 또 다른 장점은 많은 요소가 모니터링해야 할 때 많은 오버 헤드 절감을 위해 그들의 잠재력이다. 그 TBODY 1000 행 데이터 테이블, 제 1 코드는, 1,000 요소 핸들러를 첨부.

    A가 위임 - 접근 이벤트 (두 번째 코드 예) 하나의 요소는 TBODY에 이벤트 핸들러를 첨부 한 경우에만 (클릭 된 TR에 TBODY에서) 한 수준까지 거품이 필요하다.

    참고 : 위임 된 이벤트 SVG 작동하지 않습니다.

  3. 3.이것은 어떤 라이브러리 나 플러그인없이 순수 자바 스크립트 솔루션입니다 :

    이것은 어떤 라이브러리 나 플러그인없이 순수 자바 스크립트 솔루션입니다 :

    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);

    어디 hasClass입니다

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

    라이브 데모

    신용 데이브와 SIME VIDAS로 이동

    현대 JS를 사용하여, hasClass는 다음과 같이 구현할 수 있습니다 :

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

  4. 4.당신이 그들을 만들 때 객체에 이벤트를 추가 할 수 있습니다. 당신은 갈 수있는 방법이 될 수도라는 이름의 함수를 만드는, 서로 다른 시간에 여러 개체에 동일한 이벤트를 추가하는 경우.

    당신이 그들을 만들 때 객체에 이벤트를 추가 할 수 있습니다. 당신은 갈 수있는 방법이 될 수도라는 이름의 함수를 만드는, 서로 다른 시간에 여러 개체에 동일한 이벤트를 추가하는 경우.

    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 */ )
;

  5. 5.당신은 단순히 두 번있는 invoke 다음 함수에 이벤트 바인딩 호출을 마무리하고 수 : 한 번 문서 새로운 DOM 요소를 추가 이벤트 후 준비가 한 번에. 당신이 중 하나를 기존의 이벤트 바인딩을 해제 또는해야합니다 있도록 기존의 요소를 두 번 같은 이벤트를 바인딩하지 않도록 할 것 그렇게한다면 (더 나은) 만 새로 생성 된 DOM 요소에 바인딩합니다. 코드는 다음과 같을 것이다 :

    당신은 단순히 두 번있는 invoke 다음 함수에 이벤트 바인딩 호출을 마무리하고 수 : 한 번 문서 새로운 DOM 요소를 추가 이벤트 후 준비가 한 번에. 당신이 중 하나를 기존의 이벤트 바인딩을 해제 또는해야합니다 있도록 기존의 요소를 두 번 같은 이벤트를 바인딩하지 않도록 할 것 그렇게한다면 (더 나은) 만 새로 생성 된 DOM 요소에 바인딩합니다. 코드는 다음과 같을 것이다 :

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

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

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

  6. 6.() (.live) 대신 .bind를 사용하려고; .live ()는 Ajax 요청이 실행 된 후 당신의 체크 박스에 .hover 바인딩합니다.

    () (.live) 대신 .bind를 사용하려고; .live ()는 Ajax 요청이 실행 된 후 당신의 체크 박스에 .hover 바인딩합니다.

  7. 7.단일 요소 :

    단일 요소 :

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

    자식 요소 :

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

    추가 *를 알 수 있습니다. 이벤트는 해당 요소의 모든 어린이를위한 트리거됩니다.

    나는 것으로 나타났습니다 :

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

    그것은 더 이상 작동하지 않습니다, 그러나 그것은 이전에 일하고 있었다. 나는 구글 CDN에서 jQuery를 사용하고 있지만, 그것을 변경 한 경우 모르겠어요.

  8. 8.당신은 온 클릭 이벤트와 같은 이벤트 핸들러에 바인딩 요소에 라이브 () 메소드 (심지어 새로 만든 것)를 사용할 수 있습니다.

    당신은 온 클릭 이벤트와 같은 이벤트 핸들러에 바인딩 요소에 라이브 () 메소드 (심지어 새로 만든 것)를 사용할 수 있습니다.

    다음은 라이브 () 메소드 바인딩 이벤트에 요소, 심지어 새로 만든 사람을 선택하는 방법을 볼 수 있습니다 내가 쓴 샘플 코드입니다 :

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
    </head>

    <body>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/jquery-ui.min.js"></script>

        <input type="button" id="theButton" value="Click" />
        <script type="text/javascript">
            $(document).ready(function()
                {
                    $('.FOO').live("click", function (){alert("It Works!")});
                    var $dialog = $('<div></div>').html('<div id="container"><input type ="button" id="CUSTOM" value="click"/>This dialog will show every time!</div>').dialog({
                                                                                                         autoOpen: false,
                                                                                                         tite: 'Basic Dialog'
                                                                                                     });
                    $('#theButton').click(function()
                    {
                        $dialog.dialog('open');
                        return('false');
                    });
                    $('#CUSTOM').click(function(){
                        //$('#container').append('<input type="button" value="clickmee" class="FOO" /></br>');
                        var button = document.createElement("input");
                        button.setAttribute('class','FOO');
                        button.setAttribute('type','button');
                        button.setAttribute('value','CLICKMEE');
                        $('#container').append(button);
                    });
                    /* $('#FOO').click(function(){
                                                     alert("It Works!");
                                                 }); */
            });
        </script>
    </body>
</html>

  9. 9.나는 선택기를 사용하여 선호 나는 문서에 적용합니다.

    나는 선택기를 사용하여 선호 나는 문서에 적용합니다.

    이 문서에 자신을 결합하여 페이지로드 후 렌더링됩니다 요소에 적용됩니다.

    예를 들면 :

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

  10. 10.또 다른 해결책은 요소를 만들 때 리스너를 추가하는 것입니다. 본문에 수신기를 넣어 대신에, 당신은 당신이 그것을 만드는 것이 순간의 요소에 리스너를 넣어 :

    또 다른 해결책은 요소를 만들 때 리스너를 추가하는 것입니다. 본문에 수신기를 넣어 대신에, 당신은 당신이 그것을 만드는 것이 순간의 요소에 리스너를 넣어 :

    var myElement = $('<button/>', {
    text: 'Go to Google!'
});

myElement.bind( 'click', goToGoogle);
myElement.append('body');


function goToGoogle(event){
    window.location.replace("http://www.google.com");
}

  11. 11.이 방법처럼 시도 -

    이 방법처럼 시도 -

    $(document).on( 'click', '.click-activity', function () { ... });

  12. 12.이는 이벤트 위임하여 수행됩니다. 이벤트 래퍼 클래스 요소에 바인딩 얻을 것이다하지만 선택-class 요소에 위임됩니다. 그것이 작동하는 방법이다.

    이는 이벤트 위임하여 수행됩니다. 이벤트 래퍼 클래스 요소에 바인딩 얻을 것이다하지만 선택-class 요소에 위임됩니다. 그것이 작동하는 방법이다.

    $('.wrapper-class').on("click", '.selector-class', function() {
    // Your code here
});

    #노트: 래퍼 클래스 요소는 아무것도 전직 할 수있다. 문서, 신체 또는 래퍼. 래퍼는 이미 존재합니다. 그러나 선택은 반드시 페이지 로딩 시간에서 발표 할 필요가 없습니다. 그것은 나중에 올 수 있으며, 이벤트는 반드시 선택에 바인딩합니다.

  13. 13., 요소가 예를 들어, 배치 "MAIN"클래스에주의하십시오

    , 요소가 예를 들어, 배치 "MAIN"클래스에주의하십시오

    <div class="container">
     <ul class="select">
         <li> First</li>
         <li>Second</li>
    </ul>
</div>

    위의 시나리오에서, jQuery를 감상 할 주요 객체는 "컨테이너"입니다.

    그럼 당신은 기본적으로 같은 UL, 리튬 등의 용기에서 요소 이름을 가지고 선택합니다 :

    $(document).ready(function(e) {
    $('.container').on( 'click',".select", function(e) {
        alert("CLICKED");
    });
 });

  14. 14.당신은 사용할 수 있습니다

    당신은 사용할 수 있습니다

    $('.buttons').on('click', 'button', function(){
    // your magic goes here
});

    또는

    $('.buttons').delegate('button', 'click', function() {
    // your magic goes here
});

    이 두 가지 방법은 동일하지만 다른 매개 변수 순서가 있습니다.

    참조 : jQuery를 위임 이벤트

  15. 15.동적으로 jQuery를 (HTML, 특성)을 사용하여 생성 할 때 요소에 이벤트를 첨부 할 수 있습니다.

    동적으로 jQuery를 (HTML, 특성)을 사용하여 생성 할 때 요소에 이벤트를 첨부 할 수 있습니다.

    handleDynamicElementEvent 함수 (이벤트) { CONSOLE.LOG (event.type, this.value) } // 만들고 동적 요소에 이벤트를 첨부 jQuery를은 ({, "<선택>" HTML : $ .MAP (어레이 (3), 함수 (_ 인덱스) { 새로운 옵션을 반환 (인덱스, 인덱스) }), 의 위에: { 변화 : handleDynamicElementEvent } }) .appendTo ( "신체"); <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

  16. 16.동적으로 생성 된 요소가 클릭에 응답하지 않는 이유는 여기에 있습니다 :

    동적으로 생성 된 요소가 클릭에 응답하지 않는 이유는 여기에 있습니다 :

    VAR 본체 = $ ( "몸"); VAR btns = $ ( "버튼"); VAR btnB = $ ( "<버튼> B "); // '<버튼> B '문서에 아직 없다. // 따라서, '$는 ( "버튼")는`[<버튼>을 ]'를 제공한다. // 만`<버튼>은 '클릭 리스너를 가져옵니다. btns.on ({) (함수를 "클릭" CONSOLE.LOG (이); }); // 너무 늦었을위한`<버튼> B '... body.append (btnB); <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> <버튼>을

    해결 방법으로, 당신은 모든 클릭을 듣고 소스 요소를 확인해야합니다 :

    VAR 본체 = $ ( "몸"); VAR btnB = $ ( "<버튼> B "); VAR btnC = $ ( "<버튼> C "); 모든 클릭에 들어 // 및 // 체크 경우, 소스 요소 //는의``<버튼> 이다. body.on ({), 기능 (EV를 "클릭" {($ (ev.target는 () "버튼을") .is는) 경우 CONSOLE.LOG (ev.target); } }); // 이제 당신은 어떤 수를 추가 할 수 있습니다 //의`<버튼> `. body.append (btnB); body.append (btnC); <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> <버튼>을

    이것은 "이벤트 위임"라고합니다. 좋은 소식은, 그것은 jQuery를에 기능을 기본적으로 제공 :-)

    I = 11 VAR; VAR 본체 = $ ( "몸"); body.on ({) (,, 기능 "버튼"을 "클릭" var에 편지 = (I ++) toString (36) .toUpperCase ().; body.append ($ ( "<버튼>"+ 문자 + "")); }); <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> <버튼>을

  17. 17.이벤트가 바인딩되는 시점에 존재하는 페이지가 동적으로 클래스 이름 버튼 요소를 만드는 경우 이미 존재하는 부모에 이벤트를 바인딩 할 모든 부모

    이벤트가 바인딩되는 시점에 존재하는 페이지가 동적으로 클래스 이름 버튼 요소를 만드는 경우 이미 존재하는 부모에 이벤트를 바인딩 할 모든 부모

    $ (문서) .ready (함수 () { // 특히 부모 chield 클릭 $ ( ". 버튼"). (,, 기능 "버튼"을 "클릭"에 () { 경고 ( "클릭 수"); }); 버튼 클래스에 // 동적 이벤트 바인딩 $ (문서) CSTE 연구진 ( "클릭" ". 버튼을 '기능을 () { 경고 ( "Dymamic 클릭 수"); }); $ ( "입력") addClass ( "버튼").; }); <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">

    <버튼> 2 <버튼> 3 <버튼> 6

  18. 18.이미 존재하는 부모에 이벤트를 바인딩 :

    이미 존재하는 부모에 이벤트를 바인딩 :

    $(document).on("click", "selector", function() {
    // Your code here
});

  19. 19.라이브 요소에 이벤트 핸들러를 첨부 할 jQuery를 http://api.jquery.com/on/의 CSTE 연구진 () 메서드를 사용합니다.

    라이브 요소에 이벤트 핸들러를 첨부 할 jQuery를 http://api.jquery.com/on/의 CSTE 연구진 () 메서드를 사용합니다.

    또한 버전 1.9로 .live () 메소드는 제거된다.

  20. 20.차라리 문서 레벨 이벤트 리스너를 스크립팅보다 모듈 형 기능 방식으로 배치 된 이벤트 리스너를 선호한다. 그래서, 아래와 같이 할. 하나의 스틱 - 참고, 그렇게 번 이상 수신기를 부착 대한 걱정을하지 않는 동일한 이벤트 리스너 요소를 초과 할당 할 수 없습니다.

    차라리 문서 레벨 이벤트 리스너를 스크립팅보다 모듈 형 기능 방식으로 배치 된 이벤트 리스너를 선호한다. 그래서, 아래와 같이 할. 하나의 스틱 - 참고, 그렇게 번 이상 수신기를 부착 대한 걱정을하지 않는 동일한 이벤트 리스너 요소를 초과 할당 할 수 없습니다.

    VAR 반복 = 4; VAR 버튼; VAR 체 document.querySelector ( "본체") =; 경우 (나는 <반복; VAR 난 0 = I ++) { 버튼 document.createElement ( "버튼") =; button.classList.add ( "내 버튼"); button.appendChild (document.createTextNode (I)); button.addEventListener (myButtonWasClicked "클릭"); body.appendChild (버튼); } myButtonWasClicked 함수 (E) { CONSOLE.LOG (e.target); //이 특정 버튼에 액세스 }

  21. 21.요소와 바인딩 이벤트를 만드는 또 다른 유연한 솔루션 (소스)

    요소와 바인딩 이벤트를 만드는 또 다른 유연한 솔루션 (소스)

    // creating a dynamic element (container div)
var $div = $("<div>", {id: 'myid1', class: 'myclass'});

//creating a dynamic button
 var $btn = $("<button>", { type: 'button', text: 'Click me', class: 'btn' });

// binding the event
 $btn.click(function () { //for mouseover--> $btn.on('mouseover', function () {
    console.log('clicked');
 });

// append dynamic button to the dynamic container
$div.append($btn);

// add the dynamically created element(s) to a static element
$("#box").append($div);

    참고 :이은 (루프에서 사용하면 성능에 영향을 줄 수 있습니다) 각 요소에 대한 이벤트 처리기의 인스턴스를 생성합니다

  22. 22.

    <html>
    <head>
        <title>HTML Document</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    </head>

    <body>
        <div id="hover-id">
            Hello World
        </div>

        <script>
            jQuery(document).ready(function($){
                $(document).on('mouseover', '#hover-id', function(){
                    $(this).css('color','yellowgreen');
                });

                $(document).on('mouseout', '#hover-id', function(){
                    $(this).css('color','black');
                });
            });
        </script>
    </body>
</html>

  23. 23.나는 동적으로 추가 요소에서 문제없이 작동하게 $ .bind 및 $ .unbind에 대한 해결책을 찾고 있었다.

    나는 동적으로 추가 요소에서 문제없이 작동하게 $ .bind 및 $ .unbind에 대한 해결책을 찾고 있었다.

    ()에 따라 내가 온 사람들에 때어 가짜를 만들기 위해 이벤트를 첨부 할 트릭을합니다 :

    const sendAction = function(e){ ... }
// bind the click
$('body').on('click', 'button.send', sendAction );

// unbind the click
$('body').on('click', 'button.send', function(){} );

    24. from https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 어떻게 비동기 적으로 파일을 업로드 할 수 있습니까?  (0) 2020.09.20
[JQUERY] 내가 jQuery를 배경이있는 경우 "AngularJS와의 생각"? [닫은]  (0) 2020.09.20
[JQUERY] 왜 내 자바 스크립트 코드가 수신 않는 '없음'액세스 제어 - - 원산지를 허용 '헤더가 요청 된 자원에 존재하는 "우체부하지 않는 동안, 오류?  (0) 2020.09.20
[JQUERY] 왜 jQuery를 또는에서 getElementById 같은 DOM 방법은없는 요소를 찾을 수 있습니까?  (0) 2020.09.20
[JQUERY] 어떻게 비동기 호출의 응답을 반환합니까?  (0) 2020.09.20
,

티스토리툴바