他のものにもかかわらず私の `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(); 
    }); 
}); 

それは「準備ができて、ドキュメント内の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

あなたがタグにクリックイベントを書かれています。送信ボタンのような一般的な機能固有のタグでは、タグはクリック時にデフォルト機能を実行します。それはアンカーであるので、そこにないhrefをチェックするので、どこにでもリダイレクトされません。 e.preventDefault（）を使用して、これらの種類のデフォルトの動作を抑制することができます。ここでeはイベントです。だからあなたの関数は、あなたが一緒に例を入れてjsfiddleでそれをアップロードすることができ

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