Question

我正在编写一个jQuery插件，它会加载一个小小部件（GET方法），稍后会触发一个click事件。

初始化插件时，元素选择器不在DOM中。那么如何实现全局存储选择器来处理click事件呢？

我保持代码简短，易于理解。

(function($) {
    var $template; // the global variable

    $.fn.myPlugin = function() {
        $(this).bind('click', function(e) {
            $.get('/template.html', function(data) {
                $('body').append(data);
                $template = $(data); // set global variable here
            }
        }

        // fire click event on global variable here, but $template is undefined
        $(document).on('click', $template.find('.button'), function() {
            // do something
        }
    }
})(jQuery);

谢谢！

Answer 1

当确定已经加载模板时，只需在回调中定义事件处理程序。

(function($) {
    var $template; // the global variable

    $.fn.myPlugin = function() {
        $(this).bind('click', function(e) {
            $.get('/template.html', function(data) {
                $('body').append(data);
                $template = $(data); // set global variable here
                // fire click event on global variable here, but $template is undefined
                $(document).on('click', $template.find('.button'), function() {
                // do something
                }
            }
        }
    }
})(jQuery);

jQuery插件 - 全局选择器上的动态点击处理

1 个答案: