Why does my JS file not get loaded?

I am a beginner with Drupal. I want to include a JavaScript file using a custom module.

I created the .libraries.yml file, hello_world.libraries.yml.

hello_world_js:
  js:
    js/basic.js: {}
  dependencies:
    - core/jquery
    - core/drupal
    - core/drupalSettings

The module .info.yml file (hello_worl.info.yml) contains a reference to the library.

name: Hello World
type: module
description: Say Hello World
package: Custom
core: 8.x
libraries:
  - hello_world/hello_world_js

The JavaScript code in the basic.js file is the following one.

(function($,Drupal){
  Drupal.behaviors.addAccessionBehavior = {
    attach: function(context, settings){
      $(".query_button").click(function(){
        console.log("works");
      });
    }
  };
})(JQuery, Drupal);

When I click on a button using the .query_button CSS class, nothing happens and I don't know what the problem is.

หากคุณดูในคอนโซล JavaScript คุณจะได้รับข้อมูลเพิ่มเติม คุณอาจมีข้อผิดพลาดในคอนโซลของคุณที่ระบุว่า ไม่ได้กำหนด JQuery. นี่เป็นเพราะคุณประกาศ JQuery แต่ตัวแปรคือ jQuery. ดังนั้น:

})(JQuery, Drupal);

ควรเป็น:

})(jQuery, Drupal);

นอกจากนี้ เมื่อคุณต้องการทดสอบว่ามีการแนบไฟล์ของคุณหรือไม่ คุณควรเพิ่มคำสั่งดีบั๊กโดยตรงใน behaviors.attach() แทนที่จะเป็นฟังก์ชันย่อยที่ต้องคลิก (เหมือนที่คุณได้ทำไปแล้ว) ดังนั้นคุณสามารถทดสอบได้ว่าสคริปต์ของคุณถูกเพิ่มดังนี้:

Drupal.behaviors.addAccessionBehavior = {
  แนบ: ฟังก์ชัน (บริบท การตั้งค่า){
    console.log("ทำงาน");
    $(".query_button").คลิก(ฟังก์ชัน(){
      // ทำสิ่งต่าง ๆ เมื่อคลิก
    });
  }
};

สิ่งนี้จะบันทึกบางอย่างในการโหลดหน้าเว็บ ซึ่งจะบอกคุณว่าสคริปต์โหลดแล้ว (และมีตัวแปรที่จำเป็น)