動態創建的元素上的事件綁定？

Question

這個問題的答案是社區的努力。 編輯現有答案以改進這篇文章。 它目前不接受新的答案或互動。

我有一些代碼，我循環遍歷頁面上的所有 select 框並將.hover事件綁定到它們，以在mouse on/off時調整它們的寬度。

這發生在頁面准備好並且工作正常。

我遇到的問題是，我在初始循環后通過 Ajax 或 DOM 添加的任何 select 框都不會綁定事件。

我找到了這個插件（ jQuery Live Query Plugin ），但在我使用插件向我的頁面添加另一個 5k 之前，我想看看是否有人知道這樣做的方法，直接使用 jQuery 或通過其他選項。

Answer 1

從 jQuery 1.7開始，您應該使用jQuery.fn.on並填充選擇器參數：

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

解釋：

這稱為事件委托，其工作方式如下。 該事件附加到應處理的元素的 static 父級 ( staticAncestors )。 每次在此元素或后代元素之一上觸發事件時，都會觸發此 jQuery 處理程序。 然后，處理程序檢查觸發事件的元素是否與您的選擇器 ( 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>

Answer 2

jQuery.fn.on的文檔中有很好的解釋。

簡而言之：

事件處理程序僅綁定到當前選定的元素； 當您的代碼調用.on()時，它們必須存在於頁面上。

因此，在以下示例中， #dataTable tbody tr必須在生成代碼之前存在。

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

如果新的 HTML 被注入到頁面中，最好使用委托事件來附加事件處理程序，如下所述。

委托事件的優點是它們可以處理來自以后添加到文檔的后代元素的事件。 例如，如果表存在，但行是使用代碼動態添加的，則以下將處理它：

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

除了能夠處理尚未創建的后代元素上的事件之外，委托事件的另一個優點是當必須監視許多元素時，它們的開銷可能會大大降低。 在tbody中包含 1,000 行的數據表中，第一個代碼示例將處理程序附加到 1,000 個元素。

委托事件方法（第二個代碼示例）僅將事件處理程序附加到一個元素，即tbody ，並且事件只需要冒泡一個級別（從單擊的tr到tbody ）。

注意：委托事件不適用於SVG 。

Answer 3

這是一個純 JavaScript解決方案，沒有任何庫或插件：

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

現場演示

歸功於 Dave 和 Sime Vidas

使用更現代的 JS， hasClass可以實現為：

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

---

下面嵌入了相同的 jsfiddle Live 演示：

 function hasClass(elem, className) { return elem.classList.contains(className); } document.addEventListener('click', function(e) { if (hasClass(e.target, 'bu')) { alert('bu'); document.querySelector('.bu').innerHTML = '<div class="bu">Bu<div class="tu">Tu</div></div>'; } else if (hasClass(e.target, 'test')) { alert('test'); } else if (hasClass(e.target, 'tu')) { alert('tu'); } }, false);

 .test,.bu,.tu { border: 1px solid gray; padding: 10px; margin: 10px; }

 <div class="test">Test <div class="bu">Bu</div>test </div>

Answer 4

您可以在創建對象時將事件添加到對象。 如果您在不同時間向多個對象添加相同的事件，則創建一個名為 function 可能是 go 的方法。

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

Answer 5

您可以簡單地將事件綁定調用包裝到 function 中，然后調用它兩次：一次在文檔准備好時，一次在添加新 DOM 元素的事件之后。 如果您這樣做，您將希望避免在現有元素上綁定相同的事件兩次，因此您需要取消綁定現有事件或（更好）僅綁定到新創建的 DOM 元素。 代碼看起來像這樣：

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

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

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

Answer 6

嘗試使用.live()而不是.bind() ； .live()將在 Ajax 請求執行后將.hover綁定到您的復選框。

Answer 7

動態創建元素上的事件綁定

單元素：

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

子元素：

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

注意添加的* 。 將為該元素的所有子元素觸發一個事件。

我注意到：

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

它不再工作了，但它以前工作過。 我一直在使用來自 Google CDN的 jQuery ，但我不知道他們是否改變了它。

Answer 8

這是由事件委托完成的。 事件將綁定到 wrapper-class 元素，但將委托給 selector-class 元素。 這就是它的工作原理。

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

和 HTML

<div class="wrapper-class">
    <button class="selector-class">
      Click Me!
    </button>
</div>    

#注意：包裝類元素可以是任何東西。 文檔、正文或您的包裝。 Wrapper 應該已經存在。 但是， selector不一定需要在頁面加載時呈現。 它可能會稍后出現，並且事件將綁定在selector上而不會失敗。

Answer 9

我更喜歡使用選擇器並將其應用於文檔。

這將自身綁定在文檔上，並將適用於頁面加載后將呈現的元素。

例如：

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

Answer 10

您可以使用 live() 方法將元素（甚至是新創建的元素）綁定到事件和處理程序，例如 onclick 事件。

這是我編寫的示例代碼，您可以在其中看到 live() 方法如何將所選元素（甚至是新創建的元素）綁定到事件：

<!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>

Answer 11

另一種解決方案是在創建元素時添加監聽器。 與其將偵聽器放在主體中，不如在創建它的那一刻將偵聽器放在元素中：

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

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


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

Answer 12

像這樣嘗試-

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

Answer 13

注意“MAIN” class 放置元素，例如，

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

在上述場景中，主 object 和 jQuery 將監視為“容器”。

然后，您將基本上在容器下擁有元素名稱，例如ul 、 li和select ：

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

Answer 14

你可以使用

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

或者

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

這兩種方法是等價的，但參數的順序不同。

請參閱： jQuery 代表事件

Answer 15

使用jQuery(html, attributes)動態創建時，您可以將事件附加到元素。

As of jQuery 1.8 , any jQuery instance method (a method of jQuery.fn ) can be used as a property of the object passed to the second parameter:

 function handleDynamicElementEvent(event) { console.log(event.type, this.value) } // create and attach event to dynamic element jQuery("<select>", { html: $.map(Array(3), function(_, index) { return new Option(index, index) }), on: { change: handleDynamicElementEvent } }).appendTo("body");

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script>

Answer 16

這就是為什么動態創建的元素不響應點擊的原因：

 var body = $("body"); var btns = $("button"); var btnB = $("<button>B</button>"); // `<button>B</button>` is not yet in the document. // Thus, `$("button")` gives `[<button>A</button>]`. // Only `<button>A</button>` gets a click listener. btns.on("click", function () { console.log(this); }); // Too late for `<button>B</button>`... body.append(btnB);

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>A</button>

作為一種解決方法，您必須聽取所有點擊並檢查源元素：

 var body = $("body"); var btnB = $("<button>B</button>"); var btnC = $("<button>C</button>"); // Listen to all clicks and // check if the source element // is a `<button></button>`. body.on("click", function (ev) { if ($(ev.target).is("button")) { console.log(ev.target); } }); // Now you can add any number // of `<button></button>`. body.append(btnB); body.append(btnC);

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>A</button>

這稱為“事件委托”。 好消息，這是 jQuery 中的內置功能:-)

 var i = 11; var body = $("body"); body.on("click", "button", function () { var letter = (i++).toString(36).toUpperCase(); body.append($("<button>" + letter + "</button>")); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>A</button>

Answer 17

綁定事件時存在的任何父項，並且如果您的頁面使用 class 名稱按鈕動態創建元素，您會將事件綁定到已經存在的父項

 $(document).ready(function(){ //Particular Parent chield click $(".buttons").on("click","button",function(){ alert("Clicked"); }); //Dynamic event bind on button class $(document).on("click",".button",function(){ alert("Dymamic Clicked"); }); $("input").addClass("button"); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="buttons"> <input type="button" value="1"> <button>2</button> <input type="text"> <button>3</button> <input type="button" value="5"> </div> <button>6</button>

Answer 18

將事件綁定到已經存在的父級：

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

Answer 19

另一種創建元素和綁定事件的靈活解決方案（ 來源）

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

注意：這將為每個元素創建一個事件處理程序實例（在循環中使用時可能會影響性能）

Answer 20

使用 jQuery http://api.jquery.com/on/的.on()方法將事件處理程序附加到活動元素。

從 1.9 版開始， .live()方法也被刪除。

Answer 21

我更喜歡以模塊化 function 方式部署事件偵聽器，而不是編寫document級事件偵聽器的腳本。 所以，我喜歡下面。 請注意，您不能過度訂閱具有相同事件偵聽器的元素，因此不必擔心多次附加偵聽器 - 只有一個會粘住。

 var iterations = 4; var button; var body = document.querySelector("body"); for (var i = 0; i < iterations; i++) { button = document.createElement("button"); button.classList.add("my-button"); button.appendChild(document.createTextNode(i)); button.addEventListener("click", myButtonWasClicked); body.appendChild(button); } function myButtonWasClicked(e) { console.log(e.target); //access to this specific button }

Answer 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>

Answer 23

我正在尋找一種解決方案，以使$.bind和$.unbind在動態添加的元素中正常工作。

由於on()使得附加事件的技巧，為了對我來的那些創建一個假的解除綁定：

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

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