Jquery Boilerplate on multiple elements

0 votes
asked Sep 12, 2017 by remtsoy

Calling multiple elements from one plugin don't work currently. js plugin

;( function( $, window, document, undefined ) {

    "use strict";

        var pluginName = "btnClick",
            defaults = {};

        function Plugin ( element, options ) {
            this.element = element;
            this.settings = $.extend( {}, defaults, options );
            this._defaults = defaults;
            this._name = pluginName;
            this.init();
        }

        // Avoid Plugin.prototype conflicts
        $.extend( Plugin.prototype, {
            init: function() {
                self = this;
                this.dataAction = $(this.element).attr('data-action');
                this.clickAction();
            },
            clickAction: function() {
                $(this.element).on('click', function(){
                    console.log(self.dataAction);
                });
            }
        } );
        $.fn[ pluginName ] = function( options ) {
            return this.each( function() {
                if ( !$.data( this, "plugin_" + pluginName ) ) {
                    $.data( this, "plugin_" +
                        pluginName, new Plugin( this, options ) );
                }
            } );
        };

} )( jQuery, window, document );

html document

<body>
   <a class="btn" data-action="action 1">Button 1</a>
   <a class="btn" data-action="action 2">Button 2</a>
</body>
<script>
   $('.btn').btnClick();
</script>

The problem is when i am clicking on first btn with data-action="action 1", it's returns "action 2" from second data-attr.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.
Anti-spam verification:
To avoid this verification in future, please log in or register.
Welcome to Q&A, where you can ask questions and receive answers from other members of the community.
...