У меня есть немного кода, где я перебираю все поля выбора на странице и привязываю .hoverк ним событие, чтобы немного изменить их ширину наmouse on/off .

Это происходит на странице готово и работает просто отлично.

У меня проблема в том, что любые поля выбора, которые я добавляю через Ajax или DOM после начального цикла, не будут иметь привязанного события.

Я нашел этот плагин ( jQuery Live Query Plugin ), но прежде чем я добавлю еще 5k на мои страницы с помощью плагина, я хочу посмотреть, знает ли кто-нибудь способ сделать это, либо с помощью jQuery напрямую, либо с помощью другой опции.

Начиная с 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>

В документации есть хорошее объяснение 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());
});

В дополнение к их способности обрабатывать события на дочерних элементах, которые еще не созданы, еще одним преимуществом делегированных событий является их возможность значительно снизить накладные расходы, когда необходимо отслеживать многие элементы. В таблице данных с 1000 строк вtbody первом примере кода присоединяется обработчик к 1000 элементам.

Подход с делегированными событиями (второй пример кода) прикрепляет обработчик событий только к одному элементу tbody, и событие должно подниматься только на один уровень (от щелчка trдоtbody ).

Примечание: делегированные события не работают для SVG .

Это чистое решение 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;
}

Live demo

Кредит идет на Дейва и Симе Видас

Используя более современный JS, hasClassможно реализовать как:

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

Вы можете просто обернуть свой вызов привязки события в функцию, а затем вызвать его дважды: один раз в готовом документе и один раз после события, которое добавляет новые элементы DOM. Если вы сделаете это, вы захотите избежать связывания одного и того же события дважды с существующими элементами, поэтому вам нужно либо отменить привязку существующих событий, либо (лучше) связать только с вновь созданными элементами DOM. Код будет выглядеть примерно так:

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

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

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

Попробуйте использовать .live()вместо .bind(); .live()будет связываться .hoverс вашим флажком после запроса выполняет Ajax.

Привязка событий к динамически создаваемым элементам

Единственный элемент:

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

Детский элемент:

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

Обратите внимание на добавленное *. Событие будет запущено для всех дочерних элементов этого элемента.

Я заметил, что:

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

Он больше не работает, но работал раньше. Я использовал jQuery из Google CDN , но я не знаю, изменили ли они его.

Вы можете использовать метод 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>

Я предпочитаю использовать селектор и применяю его к документу.

Это привязывает себя к документу и будет применяться к элементам, которые будут отображаться после загрузки страницы.

Например:

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

Другое решение - добавить слушателя при создании элемента. Вместо того, чтобы поместить слушателя в тело, вы помещаете слушателя в элемент в тот момент, когда вы его создаете:

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

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


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

Попробуй вот так -

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

Обратите внимание на класс «MAIN», в который помещается элемент, например,

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

В приведенном выше сценарии MAIN-объект, который jQuery будет наблюдать, является «контейнером».

Тогда вы будете в основном имеют имена элементов под контейнер , например ul, liи select:

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

Это делается делегированием мероприятия . Событие будет привязано к элементу класса-оболочки, но будет делегировано элементу класса-селектора. Вот как это работает.

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

Замечания:

Элемент класса-обертки может быть чем угодно. документ, тело или ваша обертка. Оболочка уже должна существовать . Тем selectorне менее, не обязательно должны быть представлены во время загрузки страницы. Он может прийти позже , и это событие свяжет на selector обязательном порядок .

вы могли бы использовать

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

или

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

эти два метода эквивалентны, но имеют другой порядок параметров.

см .: jQuery Delegate Event

Вы можете прикрепить событие к элементу при динамическом создании с помощью jQuery(html, attributes).

Начиная с jQuery 1.8 , любой метод экземпляра jQuery (метод jQuery.fn) может использоваться как свойство объекта, передаваемого второму параметру:

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>

Вот почему динамически созданные элементы не реагируют на клики:

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>

Любая часть, которая существует в то время, когда событие связано, и если бы ваша страница динамически создавала элементы с помощью кнопки имени класса , вы бы связали событие с уже существующим родителем.

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

Привязать событие к родителю, который уже существует:

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

Используйте .on()метод jQuery http://api.jquery.com/on/, чтобы прикрепить обработчики событий к активному элементу.

Также с версии 1.9 .live()удален метод.

Я предпочитаю, чтобы прослушиватели событий были развернуты в модульной форме, а не в сценарии 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
}

Еще одно гибкое решение для создания элементов и привязки событий ( источник )

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

Примечание: это создаст экземпляр обработчика событий для каждого элемента (может повлиять на производительность при использовании в циклах)

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

Я искал решение, чтобы получить $.bind и $.unbindработать без проблем в динамически добавленных элементах.

As on () делает трюк для прикрепления событий, чтобы создать ложную привязку к тем, к кому я пришел:

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

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