Jquery 插件点击事件

Question

我一直在学习并尝试根据在线示例和教程创建自己的 jQuery 插件。

我启动了一个插件，它在每个 table 行上调用，但我的点击事件针对 table 中的每个 <tr> 运行。

我怎样才能让我的插件的点击事件只发生在被点击的 <tr> 上？

计划是一旦我让它正常工作，用一些与 <tr> 相关的内容更新一些 div，并且按钮操作需要对数据做一些事情，比如删除父级 <tr>

(function ($) {
    "use strict";

    $.quote = function(el, options) {
        var base = this;

        base.options = {};

        base.$el = $(el);
        base.el = el;

        base.$el.data('quote', base);

        function debug(e) {
            console.log(e);
        }

        base.init = function() {
            base.options = $.extend({}, $.quote.defaultOptions, options);
            //var quotes = '';
        };

        base.convert = function(e) {
            debug(e);
        };

        base.ditch = function(e) {
            debug(e);
        };
        base.updateForm = function(e) {
            base.options.buttonPress.call( this );
        }

        base.init();
    };

    $.quote.defaultOptions = {
        buttonPress: function() {
            alert('hello');
        }
    };

    $.fn.quote = function(options) {
        return this.each(function() {
            var qt = new $.quote(this, options);

            $('button[name="convert"]').click(function(e) {
                qt.convert(e);
            });
            $('button[name="ditch"]').click(function(e) {
                qt.ditch(e);
            });
            $('.widget td:not(.td-actions)').click(function(e) {
                qt.updateForm(e);
            });
        });
    };
})(jQuery);

$(function () {
     $('tr').quote();
});

HTML

<tr>
    <td></td>
    <td></td>
    <td class="td-actions"><button name="convert" class="btn btn-small btn-success"><i class=" fa fa-check"> </i></button><button name="ditch" lass="btn btn-danger btn-small"><i class=" fa fa-remove"> </i></button></td>
</tr>

Answer 1

还有其他一些事情不是最佳的，但可以解决您的具体问题：您的代码循环遍历所有 TR，然后为每个按钮添加一个新的事件处理程序 - 每行一个事件处理程序（新的） - 所以有 3 行您循环遍历这三个按钮，然后为每个其他行的按钮添加一个新的点击处理程序 - 所有这三个按钮都会在每次点击时得到处理。将事件处理程序的添加重点放在 "this" TR:

    $(this).find('button[name="convert"]').click(function (e) {
        console.log('convertcall');
        qt.convert(e);
    });
    $(this).find('button[name="ditch"]').click(function (e) {
        console.log('ditchcall');
        qt.ditch(e);
    });
    $(this).find('.widget td:not(.td-actions)').click(function (e) {
        console.log('updateformcall');
        qt.updateForm(e);
    });

Jquery 插件点击事件

Jquery plugin click events

jquery

jquery-plugins