динамически добавлять слушателя к содержимому, созданному ajax в jQuery - PullRequest
Новая
       63

динамически добавлять слушателя к содержимому, созданному ajax в jQuery

4 голосов
/ 31 марта 2010

Я пытаюсь получить значение html для ссылки. С помощью Ajax ссылки создаются динамически, поэтому я не думаю, что .bind работать, и у меня нет последней версии с .live 

$('div#message').click(function() {
  var valueSelected = $(this).html();  // picks up the whole id. I juust want single href!          
  alert(valueSelected);
  return false;
});



<div id="message">
<br/>
<a class="doYouMean" href="#">location A</a>
<br/>
<a class="doYouMean" href="#">location B</a>
<br/>
<a class="doYouMean" href="#">location C</a>
<br/>
<a class="doYouMean" href="#">location D</a>
<br/>
<a class="doYouMean" href="#">location E</a>
<br/>
</div>

Ответы [ 6 ]

16 голосов
/ 12 января 2012

Вот альтернативный подход, который не был упомянут:

Если вы используете jQuery v1.7 + , вы можете использовать метод .on() для привязки прослушивателя событий к текущему HTML, а также к HTML, добавляемому в будущее: 

$('#message a').on('click', function(){
    alert('link clicked!');
});

Если вы используете более старую версию jQuery, рекомендуется использовать вместо этого метод .delegate(): 

$('#message').delegate('a', 'click', function(){
    alert('link clicked!');
});

В итоге: 

$(elements).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(elements).on(events, selector, data, handler);        // jQuery 1.7+
3 голосов
/ 31 марта 2010

Примените ваш обработчик только к ссылкам в обратном вызове загрузки AJAX. 

$('div#message').load( myUrl, function() {
    $('div#message a').click(function() {
       var valueSelected = $(this).html();
       alert(valueSelected);
       return false;
    });
});
0 голосов
/ 12 июля 2013

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

$(document).ready(function () {
$(document.body).on('click', '.Selector_S', function () { function_F(event, this) })
}

function function_F(event, d){
...do sth here...
}

И вам вообще не нужно заново инициировать прослушиватели событий или писать что-либо в функции ajax.

0 голосов
/ 13 апреля 2011

Другое решение - создать функцию для повторной инициализации клика, потому что у вас может быть другая ситуация, как у меня :), поэтому логика может быть следующей: 

$(document).ready(function() {
  initsomething();
});

function initsomething(){
  .......
  $('div#message').click(function() {
    var valueSelected = $(this).html();  // picks up the whole id. I juust want single href!          
    alert(valueSelected);
    return false;
  });
  .......
}

при успешном выполнении ajax запустите initsomething ():)

0 голосов
/ 31 марта 2010

Вы действительно должны использовать последнюю версию, если можете помочь.

Если это элементы ".doYouMean", добавленные с использованием AJAX, и всегда присутствует #message, попробуйте: 

$('#message').bind('click', function (event) {
  var target = event.currentTarget;
  if ($('.doYouMean').filter(target)) {
    // target is the .doYouMean that was clicked: Handle here
  };
});

(Это работает: http://www.jsfiddle.net/SuVzv/)

0 голосов
/ 31 марта 2010

У вас есть 2 варианта -

  1. Используйте плагин LiveQuery, который мы использовали прежде.
  2. Повторная привязка вашей функции к событию click после каждого успешного вызова ajax (Рекомендуется)
...