[英]Why my `onclick` doesn't work despite others things works?
So I'm using some parts of gentelella and there is a file custom.js
. 所以我正在使用gentelella的某些部分,并且有一个文件
custom.js
。 I have some problems with this file because some parts works and other don't. 我对该文件存在一些问题,因为某些部分有效,而其他部分无效。
The problem is with this method: 问题在于这种方法:
$(document).ready(function() {
console.log("custom.js inside document ready");
$('.collapse-link').on('click', function() {
console.log("clicked on a collapse-link");
var $BOX_PANEL = $(this).closest('.x_panel'),
$ICON = $(this).find('i'),
$BOX_CONTENT = $BOX_PANEL.find('.x_content');
// fix for some div with hardcoded fix class
if ($BOX_PANEL.attr('style')) {
$BOX_CONTENT.slideToggle(200, function(){
$BOX_PANEL.removeAttr('style');
});
} else {
$BOX_CONTENT.slideToggle(200);
$BOX_PANEL.css('height', 'auto');
}
$ICON.toggleClass('fa-chevron-up fa-chevron-down');
});
$('.close-link').click(function () {
console.log("close-link clicked")
var $BOX_PANEL = $(this).closest('.x_panel');
$BOX_PANEL.remove();
});
});
It write "custom.js inside document ready" but when I click nothing happened. 它写了“ customer.js文档准备就绪”,但是当我单击时什么也没发生。
And if I look into the HTML I have the same classes as in the JS: 如果我查看HTML,则具有与JS中相同的类:
it might be that on document ready these specific elements are not found. 可能是在准备好的文档中找不到这些特定元素。 In general a best practice is to delegate the events to the document, like this:
通常,最佳做法是将事件委托给文档,如下所示:
$(document).ready(function() {
console.log("custom.js inside document ready");
$(document).on('click', '.collapse-link' /* <--- notice this */, function() {
console.log("clicked on a collapse-link");
var $BOX_PANEL = $(this).closest('.x_panel'),
$ICON = $(this).find('i'),
$BOX_CONTENT = $BOX_PANEL.find('.x_content');
// fix for some div with hardcoded fix class
if ($BOX_PANEL.attr('style')) {
$BOX_CONTENT.slideToggle(200, function(){
$BOX_PANEL.removeAttr('style');
});
} else {
$BOX_CONTENT.slideToggle(200);
$BOX_PANEL.css('height', 'auto');
}
$ICON.toggleClass('fa-chevron-up fa-chevron-down');
});
$(document).on('click', '.close-link' /* <--- notice this */, function () {
console.log("close-link clicked")
var $BOX_PANEL = $(this).closest('.x_panel');
$BOX_PANEL.remove();
});
});
You have written the click event on the a tag. 您已将click事件写在标记上。 In general functional specific tags like submit button, a tag will do their default functionality on click.
在一般功能特定的标签(例如“提交”按钮)中,标签将在单击时执行其默认功能。 So as it is anchor it will check for href which is not there so the it is not redirecting to anywhere.
因此,由于它是锚,它将检查不存在的href,因此它不会重定向到任何地方。 We can supress the default behaviour of these kinds using e.preventDefault().
我们可以使用e.preventDefault()阻止这些默认行为。 Here e is the event.
这里是事件。 So change your function to
因此将您的功能更改为
$('.collapse-link').on('click', function(e) {
e.preventDefault();
console.log("clicked on a collapse-link");
var $BOX_PANEL = $(this).closest('.x_panel'),
$ICON = $(this).find('i'),
$BOX_CONTENT = $BOX_PANEL.find('.x_content');
// fix for some div with hardcoded fix class
if ($BOX_PANEL.attr('style')) {
$BOX_CONTENT.slideToggle(200, function(){
$BOX_PANEL.removeAttr('style');
});
} else {
$BOX_CONTENT.slideToggle(200);
$BOX_PANEL.css('height', 'auto');
}
$ICON.toggleClass('fa-chevron-up fa-chevron-down');
});
And 和
$('.close-link').on('click', function(e) {
e.preventDefault();
console.log("close-link clicked")
var $BOX_PANEL = $(this).closest('.x_panel');
$BOX_PANEL.remove();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.