it-swarm.com.ru

Присоединение события 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 (который еще не является частью DOM, но будет происходить после запуска нескольких событий).

154
danielrvt

Использовать этот. Вы можете заменить тело любым родительским элементом, который существует в 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+

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

247
ᾠῗᵲᄐᶌ

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

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

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

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

33
Matas Vaitkevicius

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

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

Пытаться:

$('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 будет размещены на странице. Или используйте делегированные события, чтобы прикрепить событие обработчик, как описано далее.

Источник: http://api.jquery.com/on/

8
j08691

Вы должны добавить это. Создайте элемент с:

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

Тогда если вы добавите это будет работать.

Посмотрите на ваш пример здесь и простую версию здесь .

8
Marconi

На мероприятии

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

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

1
Jorge

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

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

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

0
Nishu Tayal

Дополнение информации для тех людей, которые используют .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"));
});
0
Fabien Haddadi

Работает ли у вас .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/

0
PsychoDUCK