动态添加侦听器到 ajax 在 jQuery 中创建的内容

Question

我正在尝试获取单击的链接的 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>

Answer 1

这是尚未提及的替代方法：

如果您使用 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+

Answer 2

在 AJAX 加载的回调中将处理程序仅应用于链接。

$('div#message').load( myUrl, function() {
    $('div#message a').click(function() {
       var valueSelected = $(this).html();
       alert(valueSelected);
       return false;
    });
});

Answer 3

您有 2 个选择 -

1. 使用 LiveQuery 插件，这是我们在 .live 出现之前使用的插件
2. 在每次成功的 ajax 调用后将您的函数重新绑定到单击事件。 （受到推崇的）

Answer 4

如果可以的话，您确实应该使用最新版本。

如果是使用 AJAX 添加的“.doYouMean”元素，并且 #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/)

Answer 5

其他解决方案是为单击重新初始化创建一个函数，因为您可能有其他情况，就像我一样:)，所以逻辑可能如下：

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

Answer 6

也许是一个迟到且重复的答案，但这可能是迟到了，但这就是我需要 ajax 时所做的。

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

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

而且您根本不需要重新启动事件侦听器或在 ajax 函数中编写任何内容。