在 jquery 插件中委托 parents 事件

Question

在我的插件中，我动态创建项目并将事件委托给这些项目。我的问题是委托 object "this" 之外的事件（parent），比如 header 所以您可以在同一页面上的多个表格上使用该插件。

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

    $.fn.myPlugin = function(options) {

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

            /* RENDER DYNAMICALLY "THIS" HEADER */
            var hd = "<div class=\"header\"><button type=\"button\" id=\"clickMe\">Click Me</button></div>";
            $(hd).insertBefore(this);

            /* RENDER DYNAMICALLY "THIS" TD */
            var rows = "<tr><td>1</td><td>200</td><td>Foo</td></tr>";
            $(this).find('tbody').html(rows);

            /* DELEGATE "THIS" TD ELEMENT*/
            $(this).on('click', 'td', function() {
                //do something
            });

            /* DELEGATE PARENTS "THIS" ELEMENT */
            // problem if using plugin for more tables in the same page,
            // because header might belong to multiple tables
            $('.header').on('click', '#clickMe', function(e) {
                e.stopPropagation();
                //do something
            });

        });
    };

})(jQuery, window, document);


$(#tbl).myPlugin();

html

<table id="tbl" class="table">
    <thead>
        <tr>
            <th>ID</th>
            <th>Code</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

我如何才能仅委派属于或属于我的 object 的 parent 的事件？谢谢

Answer 1

如果我理解你的问题，这可能会有所帮助：

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

    $.fn.myPlugin = function(options) {

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

            /* RENDER DYNAMICALLY "THIS" HEADER */
            var hd = "<div class=\"header\"><button type=\"button\" id=\"clickMe\">Click Me</div>";
            $(hd).insertBefore(this);

            /* RENDER DYNAMICALLY "THIS" TD */
            var rows = "<tr><td>1</td><td>200</td><td>Foo</td></tr>";
            $(this).find('tbody').html(rows);

            /* DELEGATE "THIS" TD ELEMENT*/
            $(this).on('click', 'td', function() {
                //do something
//                alert($(this).closest('table').attr('id')); 
            });

            /* DELEGATE PARENTS "THIS" ELEMENT */
          // no problem more: you are added button BEFORE table, so get the prev element with class .header
            $(this).prev('.header').on('click', '#clickMe', function(e) {
                e.stopPropagation();
                alert('clicked button for ' + $(that).attr('id') + ' table.'); //get table in button
            });

        });
    };

})(jQuery, window, document);


$('.table').myPlugin();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbl" class="table">
    <thead>
        <tr>
            <th>ID</th>
            <th>Code</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

<table id="tbl2" class="table">
    <thead>
        <tr>
            <th>ID</th>
            <th>Code</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

<table id="tbl3" class="table">
    <thead>
        <tr>
            <th>ID</th>
            <th>Code</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

在 jquery 插件中委托 parents 事件

delegate parents events of this in jquery plugin

jquery

jquery-plugins