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

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

В основном у меня есть эта кнопка, возвращающая мою функцию, а затем добавляю ее в DOM. Я хочу вернуть кнопку с помощью собственного обработчика кликов. Я не хочу выбирать его из DOM для прикрепления обработчика.

Мой код:

createMyButton = function(data) {

  var button = $('<div id="my-button"></div>')
    .css({
       'display' : 'inline',
       'padding' : '0px 2px 2px 0px',
       'cursor' : 'pointer'
     }).append($('<a>').attr({
       //'href' : Share.serializeJson(data),
       'target' : '_blank',
       'rel' : 'nofollow'
     }).append($('<image src="css/images/Facebook-icon.png">').css({
       "padding-top" : "0px",
       "margin-top" : "0px",
       "margin-bottom" : "0px"
     })));

     button.click(function () {
        console.log("asdfasdf");
     });

     return button;     
}

Кнопка, которая возвращает, не может поймать событие клика. Однако, если я это сделаю (после того, как кнопка добавлена ​​в DOM):

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

Это работает... но не для меня, а не для того, что я хочу.

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

О! Кстати, я работаю с OpenLayers, а объектом DOM, к которому я добавляю эту кнопку, является OpenLayers.FramedCloud(Wich еще не является частью 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');
});