jquery自定义插件中动态创建的元素的事件

时间:2017-10-05 10:32:58

标签: jquery jquery-plugins

我创建了一个插件,它将创建动态元素并附加到某个容器。我想在我的插件中绑定该元素的事件,以便它可以使用插件信息等。

(function ($, window, document, undefined) {
    $.scrollTo = function(el, options){
        // To avoid scope issues, use 'base' instead of 'this'
        // to reference this class from internal events and functions.
        var base = this;

        // Access to jQuery and DOM versions of element
        base.$el = $(el);
        base.el = el;

        base.init = function(){
            base.options = $.extend({},$.scrollTo.defaultOptions, options);

            // Put your initialization code here
        };

        // On click
        base.$el.click(function (event) {
          event.preventDefault(); 
          var span = $('<span class="myElement"></span>'); 
          span.appendTo('#main');
        });    

        // Run initializer
        base.init();
    };

    $.scrollTo.defaultOptions = {};

    $.fn.scrollTo = function(options){
        return this.each(function(){
            (new $.scrollTo(this, options));
        });
    };

})(jQuery, window, document);


//Initialize plugin
$('.content #test').scrollTo();

我正在点击事件上创建一个新元素,并希望在其中添加一个click函数,在该函数内部我想使用插件选项。我怎么能实现这种需要帮助?

1 个答案:

答案 0 :(得分:0)

如果你想将一个事件附加到一个动态生成的元素,那么我认为你应该知道的最重要的事情是你不能用通常的$("") jQuery 选择器,您必须使用$(document),例如:

而不是使用它:

$('input[type="checkbox"]')

我们将使用它:

$(document).on("change","input[type='checkbox']",function(){});

处理来自任何checkbox

的点击

灵感来自:Event binding on dynamically created elements?