javascript - 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');
    coloumn       = options.coloumn;

    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(coloumn, 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({
        coloumn:[
            {'type':'text','name':'NIK','prop':'disabled'},
            {'type':'text','name':'NAME','prop':''},
        ]
    }); 

$('.crud2').fTable({
    coloumn:[
        {'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'）

有什么帮助吗？

标签： javascriptjqueryjquery-plugins

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':''},
    ]
});