我想在单击特定标签时触发简单的警报。这是我的 html 代码
<html>
<head>
<script src="js/modal-load.js"></script>
<script>
$('.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>
下面是我的 jquery 插件
(function($){
$.fn.modalLoad = function(){
var $t = $(this);
$t.on('click',function(){
alert($(this).attr('href'));
});
};
})(jQuery);
没有任何错误，但为什么没有触发警报？还有，有没有更简单的jquery插件结构？
最佳答案
您在 head 部分编写了脚本，当执行该脚本时，目标元素 .modal-link 尚未出现在 dom 中，因此不会为这些元素初始化插件。因此，将您的脚本移至 dom ready handler .
还需要包含 jQuery 库() - 假设您已经拥有了这个库，正如您所说，没有错误。
<!-- include jQuery library-->
<script src="js/jquery.js"></script>
<script src="js/modal-load.js"></script>
<script>
//dom ready handler
jQuery(function($){
$('.modal-link').modalLoad();
})
</script>
关于javascript - 在jquery插件中添加事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29203642/