我想制作一个简单的插件，以在类被 jquery 插件绑定(bind)时显示警报。
下面是我的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 插件。但是当我绑定(bind)的特定类时，它不会被点击事件触发。
我的代码有什么问题？我的 DOM 选择器在 add_bindings 部分有什么错误吗？
感谢提前
*编辑
最佳答案
您需要将点击处理程序附加到 $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
关于javascript - 在 jquery 插件中创建点击事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29204788/