Question

我正在尝试使用this.each方法之外的一些函数做一个简单的插件我想在同一页面的两个元素上使用，但我有问题，因为它引用了相同的表格元素。

;(function ($, window, document, undefined) {
    'use strict';

    function init() {
        makeHeader.call(this);
        $('<p>footer</p>').insertAfter('table');
    }

    function makeHeader() {
        $('<p>header</p>').insertBefore('table');
    }

    $.fn.MYPlugin = function(options) {
        var options = $.extend(true, {}, defaults, options);

        return this.each(function() {
            var $this = $(this);

            init.call(this);

            $this.on('click', 'th', function() {
                alert('Hallo!');
            });

        });
    };
})(jQuery, window, document);

JS

$(function() {
    $('#tbl').MYPlugin();
    $('#tbl2').MYPlugin();
});

HTML

<table id="tbl" class="table table-condensed table-hover table-striped table-bordered">
    <thead>
        <tr>
            <th>ID</th>
            <th>Code</th>
            <th>Name</th>
            <th>Phone</th>
        </tr>
    </thead>
</table>

<table id="tbl2" class="table table-condensed table-hover table-striped table-bordered">
    <thead>
        <tr>
            <th>ID</th>
            <th>Code</th>
            <th>Name</th>
            <th>Phone</th>
        </tr>
    </thead>
</table>

如何才能使插件仅在已初始化元素（#tbl或#tbl2）的保留上下文中工作，以便您可以在同一页面上的多个项目中使用它？感谢

Answer 1

您可以通过致电init.call(this)来解决问题，但不能在this中使用init()，而不是将其传递给makeHeader() ...其中也不是function init() { makeHeader.call(this); $('<p>footer</p>').insertAfter(this); } function makeHeader() { $('<p>header</p>').insertBefore(this); }利用！

尝试：

/usr/bin/git

Jquery - 插件的保留元素

1 个答案: