CODEWITHSUNDEEP
jqueryjquery-plugins
Gus
Gus

Reputation: 943

delegate parents events of this in jquery plugin

In my plugin I create items dynamically and delegating the events on these items. My problem is to delegate the events that are outside (parent) of my object "this" like header so you can use the plugin on multiple tables on the same page.

;(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>

How can I delegate only events that belong to or are parents of my this object? Thank you

Upvotes: 0

Views: 67

Answers (1)

futualien
futualien

Reputation: 111

If I understand your trouble this might help:

;(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>

Upvotes: 1

Related Questions