Question

所以我使用了gentelella的某些部分，并且有一个文件custom.js。我对这个文件有一些问题，因为有些部分可以正常工作而其他部分没有。

问题出在这个方法上：

$(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();
    });
});

在文档准备好的＃34;中编写＆＃34; custom.js但当我点击什么都没发生。

如果我查看HTML，我有与JS中相同的类：

Answer 1

可能是在文档就绪时找不到这些特定元素。通常，最佳做法是将事件委托给文档，如下所示：

$(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();
    });
});

Answer 2

您已在a标记上写了click事件。通常功能特定的标签，如提交按钮，标签将在点击时执行其默认功能。因为它是锚，它将检查不存在的href，因此它不会重定向到任何地方。我们可以使用e.preventDefault（）来抑制这些类型的默认行为。这是事件。所以将你的功能改为

$('.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');
    });

并且

$('.close-link').on('click', function(e) { 
    e.preventDefault();
    console.log("close-link clicked")
        var $BOX_PANEL = $(this).closest('.x_panel');

        $BOX_PANEL.remove();
});

为什么我的`onclick`在其他事情无效的情况下无法工作？

2 个答案: