為什么我的`onclick`在其他情況下仍然不起作用？

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

它寫了“ customer.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

您已將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();
});