Question

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

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

我如何才能获得它，以便我的插件的点击事件只发生在点击的<tr>上？

计划是一旦我让它正常工作以更新一些div与一些与<tr>相关的内容，并且按钮操作需要对数据执行某些操作，例如删除父<tr> < / p>

(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，然后为每个按钮添加一个NEW事件处理程序 - 每行一个事件处理程序（新） - SO循环使用3行通过这三个，然后为每个OTHER行的按钮添加一个新的点击处理程序 - 所有这三个按钮都会被处理掉。将事件处理程序的添加重点放在“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插件点击事件

1 个答案: