gpt4 book ai didi

javascript - 在 jquery 插件中创建点击事件

转载 作者:行者123 更新时间:2023-11-30 16:59:00 25 4
gpt4 key购买 nike

我想制作一个简单的插件,以在类被 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com