Question

以下示例插件不适用于动态创建的元素。

$.fn.getData = function() {
    return this.click(function() {
        alert($(this).data("aloc"));    
    }); 
};

$("a").getData();

我可以使用jQuery.livequery插件

来实现

$("a").livequery(function() {
    $(this).getData();
});

但是想在我的插件中没有livequery的情况下执行此工具

Answer 1

对于委派事件，您需要根据jQuery 1.7及之后使用.on()。在这里，我已经修改了您的代码，如下所示，它的工作正如您所愿。

Jquery代码：

//plugin
$.fn.getData = function () {
   return $(document).on('click', 'a', function () {
      alert($(this).data("aloc"));
   });
};

现场演示：

http://jsfiddle.net/dreamweiver/MSkm6/9/

快乐编码：）

Answer 2

问题是你没有为动态创建的元素设置事件监听器，而且你知道当你不这样做时会发生什么！没有任何反应，它不会被触发，所以尝试稍微改变你的插件代码：

$.fn.getData = function() {
    var tagName=$(this).prop("tagName"); //if you wanna get the element by tagname
    var elemID='#'+$(this).attr("id"); //if you wanna get the element by id
    var elemClass='.'+$(this).attr("class"); //if you wanna get the element by class
    return $(document).bind('click','put tagName or elemID or elemClass based on your needs here',function() {
        alert($(this).data("aloc"));    
    }); 
};

$("a").getData();

现在它可以为您提供所需的结果。

更新：或者你可以简单地使用：

$.fn.getData = function() {
    return $(this).bind('click',function() {
        alert($(this).data("aloc"));    
    }); 
};

$("a").getData();

Answer 3

您可以在定义标记后添加.getData（）。它会起作用。

//create new element
$("#NewElement").click(function(){
    var n = $('a').length+1;
    $("<a href='#' data-aloc='a"+n+"'>New Test "+n+"</a><br />").getData().insertBefore($(this));
});

Answer 4

解决方案可以是jsfiddle

$.fn.getData = function() {
    return $(document).on('click',this.selector,function() {
        alert($(this).data("aloc"));    
    }); 
};
$("a").getData();

jQuery插件绑定到动态创建的元素

4 个答案: