Jquery 插件无法在多个元素上正常工作

Question

我已经创建了自己的简单 jQuery 插件，但是当我放置 2 个元素并在每个元素上调用该插件时，我遇到了一些问题。

这是我的

.js

代码：

function fTable(element,options) {
    self          = this;
    this.$element = $(element);
    this.table    = $(this.$element).find('table');
    this.thead    = $(this.table).find('thead');
    this.tbody    = $(this.table).find('tbody');
    column        = options.column;

    this.defaults = {

    }

    // Merge default options with user options
    this.options = $.extend(true, {}, this.defaults, options);
    this.init();
}

fTable.prototype = {
    init : function() {
        self = this;
        this.td = $(this.thead).find('tr td:first');
        $(this.td).html('<a class="add">Plus</a>');
        this.bindEvents();
    },

    bindEvents : function() { 
        self = this;
        console.log(this.table);
        $(this.table).on('click', '.add', function(){
            $row =  '<tr>';
            $row += '<td></td>';
            
            $.each(column, function(index, value){
                $row += '<td><input type="text" value="" name='+value.name+' '+value.prop+'></td>';
            });

            $row += '</tr>';
            console.log(self);
            $($row).appendTo(self.table);
            lastTR = $(self.tbody).find('tr:last');
            $(lastTR).find('td:first').html('<a class="remove">Remove</a>');
        });

        $(this.table).on('click', '.remove', function(){
            row = $(this).closest('tr');
            $(row).remove();
        });
    }
}

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

$('.crud').fTable({
        column:[
            {'type':'text','name':'NIK','prop':'disabled'},
            {'type':'text','name':'NAME','prop':''},
        ]
    }); 

$('.crud2').fTable({
    column:[
        {'type':'text','name':'NIK','prop':'disabled'},
        {'type':'text','name':'NAME','prop':''},
    ]
}); 

HTML：

<div class="crud">
    <table class="table table-bordered">
        <thead>
            <tr>
                <td style="width:10%"></td>
                <td>NIK</td>
                <td>Name</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
                <td>1</td>
                <td>Ardhi</td>
            </tr>
            <tr>
                <td></td>
                <td>2</td>
                <td>Mega</td>
            </tr>
        </tbody>
    </table>
</div>

<div class="crud2">
    <table class="table table-bordered">
        <thead>
            <tr>
                <td style="width:10%"></td>
                <td>NIK</td>
                <td>Name</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
                <td>1</td>
                <td>Zaphire</td>
            </tr>
            <tr>
                <td></td>
                <td>2</td>
                <td>Rexa</td>
            </tr>
        </tbody>
    </table>
</div>

问题是当我单击第一个表（class='crud'）上的“加号”时，它将向第二个表（class='crud2'）而不是第一个表（class='crud'）添加新行

有什么帮助吗？

Answer 1

你的范围有问题。在您的

bindEvents

原型函数中，您声明

self=this

但您没有引用当前作用域。事实上，你到处都存在范围问题。 请查看 JavaScript 范围。

将该行更改为

var self

或什至更好的

let self

以获取函数范围，而不是任何更高的（全局）或之前声明的 self。

function fTable(element,options){
    let self      = this; // you omitted let or var here
    this.$element = $(element);
    this.table    = $(this.$element).find('table');
    this.thead    = $(this.table).find('thead');
    this.tbody    = $(this.table).find('tbody');
    this.column   = options.column; // it was omitted here also but for sake of consistency, I applied column as a member to fTable.

    this.defaults = {

    }

    //Merge default options with user options
    this.options = $.extend(true, {}, this.defaults, options);
    this.init();
}

fTable.prototype = {
    init : function(){
        let self = this; // omitted here too
        this.td = $(this.$element).find('tr td:first');
        $(this.td).html('<a class="add">Plus</a>');
        this.bindEvents();
    },

    bindEvents : function(){
        let self = this;
        $(this.table).on('click', '.add', function(){
            let $row =  '<tr>';
            $row += '<td></td>';

            $.each(self.column, function(index, value){
                $row += '<td><input type="text" value="" name='+value.name+' '+value.prop+'></td>';
            });

            $row += '</tr>';
            $($row).appendTo(self.table);
            let lastTR = $(self.tbody).find('tr:last');
            $(lastTR).find('td:first').html('<a class="remove">Remove</a>');
        });

        $(this.table).on('click', '.remove', function(){
            let row = $(self).closest('tr');
            $(row).remove();
        });
    }
}

$.fn.fTable = function(options){
    var self = this; // and here
    return this.each(function(){
        new fTable(self,options);
    });
}

$('.crud').fTable({
        column:[
            {'type':'text','name':'NIK','prop':'disabled'},
            {'type':'text','name':'NAME','prop':''},
        ]
    }); 

$('.crud2').fTable({
    column:[
        {'type':'text','name':'NIK','prop':'disabled'},
        {'type':'text','name':'NAME','prop':''},
    ]
});