在 jquery 插件中创建点击事件

Question

如果 class 被 jquery 插件绑定，我想制作一个简单的插件来显示警报。

下面是我的html代码

 <html>
 <head>
 <script src="js/modal-load.js"></script>
 <script>
  $(document).ready(function(){
      $('.modal-link').modalLoad();
  })
 </script>
 </head>
 ....
 <body>
      <div class="hblock-1 text-4 text__uppercase color-7">
            <a class="login btn btn-primary modal-link" href="/login-modal.php" data-toggle="modal" data-target="#login-modal">Log in</a>
            <a href="index.html#" class="register btn btn-primary modal-link">Register</a>
      </div>
 </body>

这是我的插件脚本

 (function($){

     $.modalLoad = function(element, options){

         var defaults = {
             foo: 'bar',
             onFoo: function() {}
         }

         var plugin = this;

         plugin.settings = {};

         var $element = $(element),
             element = element;

         plugin.init = function(){
             plugin.settings = $.extend({},defaults, options);
             plugin.add_bindings();
         }


         plugin.add_bindings = function(){
             this.click(function(){
                 alert('a');
             })
         }

         plugin.create_modal = function(){
             $('body').append('<div class="modal-wrapper"></div>');
         }

         plugin.init();

     }

     $.fn.modalLoad = function(options){

         return this.each(function(){
             if(undefined == $(this).data('modalLoad')){
                 var plugin = new $.modalLoad(this, options);
                 $(this).data('modalLoad', plugin);
             }
         });

     }

 })(jQuery);

在 html 代码中，我已经初始化了 modalLoad 插件。但是当我绑定的特定 class 时，它不会被点击事件触发。

我的代码有什么问题？我的 DOM 选择器在 add_bindings 部分有什么错误吗？

感谢提前

*已编辑

Answer 1

您需要将点击处理程序附加到 $element 而不是 this。在 add_bindings 中，this 指的是插件对象而不是被点击的元素，因此 this 不会有一个名为 on 的方法（你应该会得到类似 Uncaught TypeError: undefined is not a function 的错误在你的控制台中）

    plugin.add_bindings = function () {
        $element.click(function (e) {
            alert('a');
            e.preventDefault()
        })
    }

演示：Fiddle

在 jquery 插件中创建点击事件

Create click event in jquery plugin

html

javascript

jquery

dom