Присоединение события click к объекту JQuery, еще не добавленному в DOM

Ответ 1

Используйте это. Вы можете заменить тело на любой родительский элемент, который существует в dom ready

$('body').on('click', '#my-button', function () {
     console.log("yeahhhh!!! but this doesn't work for me :(");
});

Посмотрите http://api.jquery.com/on/ для получения дополнительной информации о том, как использовать on(), поскольку он заменяет live() с версии 1.7+.

Ниже перечислены, какую версию вы должны использовать

$(селектор).live(события, данные, обработчик);//jQuery 1.3 +

$(document).delegate(селектор, события, данные, обработчик);//jQuery 1.4.3 +

$(document).on(события, селектор, данные, обработчик);//jQuery 1.7 +

Ответ 2

Я действительно удивлен, что никто не опубликовал это еще

$(document).on('click','#my-butt', function(){
   console.log('document is always there');
}) 

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

Примечание: это не оптимально с точки зрения производительности - чтобы получить максимальную скорость, нужно попытаться подключиться к ближайшему родительскому элементу, который будет вставлен.

Ответ 3

Попробуйте это.... Замените тело родительским селектором

$('body').on('click', '#my-button', function () {
    console.log("yeahhhh!!! but this doesn't work for me :(");
});

Ответ 4

Try:

$('body').on({
    hover: function() {
        console.log("yeahhhh!!! but this doesn't work for me :(");
    },
    click: function() {
        console.log("yeahhhh!!! but this doesn't work for me :(");
    }
},'#my-button');

пример jsfiddle.

При использовании .on() и привязки к динамическому элементу вам нужно обратиться к элементу, который уже существует на странице (например, в примере). Если вы можете использовать более конкретный элемент, который улучшил бы производительность.

Обработчики событий привязаны только к выбранным в данный момент элементам; Oни должен существовать на странице в момент, когда ваш код выполняет вызов .on(). Чтобы убедиться, что элементы присутствуют и могут быть выбраны, выполните событие привязка внутри готового документа документа для элементов, находящихся в HTML-разметка на странице. Если на страницу вводится новый HTML-код, выберите элементы и присоедините обработчики событий после того, как новый HTML помещен на страницу. Или используйте делегированные события для присоединения события обработчик, как описано ниже.

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

Ответ 5

Вам нужно добавить его. Создайте элемент с помощью:

var $div = $("<div>my div</div>");
$div.click(function(){alert("clicked")})
return $div;

Затем, если вы добавите его, он будет работать.

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

Ответ 6

В случае события

$('#my-button').on('click', function () {
    console.log("yeahhhh!!! but this doesn't work for me :(");
});

Или добавьте событие после добавления

Ответ 7

Использует ли с вами работу .live?

$("#my-button").live("click", function(){ alert("yay!"); }); 

http://api.jquery.com/live/

ИЗМЕНИТЬ

Как и в jQuery 1.7, метод .live() устарел. Используйте .on() для присоединения обработчиков событий. Пользователи более старых версий jQuery должны использовать .delegate() в предпочтении .live().

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

Ответ 8

Метод jQuery.on используется для связывания событий даже без присутствия элемента при загрузке страницы. Вот ссылка Он используется следующим образом:

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

Прежде чем использовать jquery 1.7, метод live(), но теперь он устарел.

Ответ 9

Дополнение информации для тех людей, которые используют .on() для прослушивания событий, связанных с входами внутри недавно загруженных ячеек таблицы; Мне удалось связать обработчики событий с такими ячейками таблицы, используя делегат(), но .on() не будет работать.

Я привязал идентификатор таблицы к .delegate() и использовал селектор, который описывает входы.

например.

HTML

<table id="#mytable">
  <!-- These three lines below were loaded post-DOM creation time, using a live callback for example -->
  <tr><td><input name="qty_001" /></td></tr>
  <tr><td><input name="qty_002" /></td></tr>
  <tr><td><input name="qty_003" /></td></tr>
</table>

JQuery

$('#mytable').delegate('click', 'name^=["qty_"]', function() {
    console.log("you clicked cell #" . $(this).attr("name"));
});

Ответ 10

Возможно, bind() поможет:

button.bind('click', function() {
  alert('User clicked');
});