在动态添加的元素上调用函数答案

【问题标题】：Call function on dynamically added elements在动态添加的元素上调用函数
【发布时间】：2013-11-30 20:40:55
【问题描述】：

我对 javascript 和 jquery 很陌生，所以这可能是一个非常简单的问题。请不要介意。

我在 id = "whatever" by 的分区中添加新的 link(a) 元素

$("#whatever").append(jQuery('<a>').attr('href', 'url').text('blah'));

调用函数

$(function () {
  $('#whatever a').tagcloud();
});

在该特定 div 内的每个链接元素上。但是这个函数只在旧元素上调用，而不是在我刚刚动态添加的元素上调用。我试过这样做：

$(document).on("change", '#whatever', function () {
    $("whatever a").tagcloud();  
});

但它仍然无法正常工作。

【问题讨论】：

为什么不等到元素被添加后再调用插件呢？
我只是这样做。首先追加所有元素，然后调用插件。
如果方法返回一个jQuery对象，$("#whatever").append(jQuery('<a>').attr('href', 'url').text('blah').tagcloud());有什么问题？
@undefined - 不工作:(它也没有显示以前的元素。
tagcloud() 方法有什么作用？在jsfiddle.net 上创建一个演示并重现问题怎么样？这样人们就可以提出一种工作的方法。

【解决方案1】：

var $link = $('<a>').attr('href', 'url').text('blah');
$("#whatever").append($link);
$link.tagcloud();

$(document).on("change" 永远不会触发。

【讨论】：

【解决方案2】：

回复您的编辑，试试这个：

$(document).on("change", '#whatever', function () {
    $("#whatever a").tagcloud();  
});

我想你可能忘记了选择器中的 #。

【讨论】：

【解决方案3】：

它似乎没有按预期工作，因为您缺少将 rel 属性添加到要附加的元素。

// ...
// The plugin reads the rel attributes
var tagWeights = this.map(function(){
   return $(this).attr("rel");
});

试试这个：

$('<a>').attr({'href': 'url', 'rel': 'value'})
        .text('blah')
        .tagcloud()
        .appendTo('#someWhere');

【讨论】：

【解决方案4】：

首先在您的示例中$("whatever a") 应该是$("#whatever a")，但是当我遇到这种情况时，我会委托与附加相同的操作

$("#whatever").append(jQuery('<a>').attr('href', 'url').text('blah'));
$('#whatever a').off();
$('#whatever a').tagcloud();

【讨论】：

为什么要删除所有事件处理程序，然后重新安装它们。为什么不喜欢 Pinal 的回答，只需将事件处理程序添加到新创建的对象。
删除旧的原因是因为，如果#whatever 有多个<a> 元素，您最终将向它们重新添加事件，导致它们多次触发。并不是我不“喜欢”另一个答案，这只是一种不同的方式以及我倾向于如何去做。 Pinal 将它添加到每个新元素中，我将它添加到元素被附加到的父元素的所有子元素中。

【解决方案5】：

试试这个：

$("body").on("tagcloud", "#whatever", function(){
     $("#whatever").append(jQuery('<a>').attr('href', 'url').text('blah')); 
});

另外，jQuery 有一些关于它的信息：

我想将此作为评论，但不能。希望对您有所帮助。

【讨论】：

【解决方案6】：

试试这个：

$('#whatever').on('change', 'a', function() {
     $(this).tagcloud();
 });

【讨论】：