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.

Nếu bạn tìm trong bảng điều khiển JavaScript, bạn có thể biết thêm thông tin. Bạn có thể gặp lỗi trong bảng điều khiển có nội dung JQuery không được xác định. Điều này là do bạn đã khai báo JQuery nhưng biến là jQuery. Vì vậy, điều này:

})(JQuery, Drupal);

Nên thế này:

})(jQuery, Drupal);

Ngoài ra, khi bạn muốn kiểm tra xem tệp của mình đã được đính kèm hay chưa, bạn nên thêm lệnh gỡ lỗi trực tiếp vào behavior.attach(), thay vì một chức năng phụ yêu cầu nhấp chuột (như bạn đã thực hiện). Vì vậy, bạn có thể kiểm tra xem tập lệnh của mình đã được thêm như thế này chưa:

Drupal.behaviors.addAccessionBehavior = {
  đính kèm: chức năng (ngữ cảnh, cài đặt){
    console.log("hoạt động");
    $(".query_button").click(function(){
      // Làm mọi thứ khi nhấp chuột
    });
  }
};

Điều này sẽ ghi lại nội dung nào đó khi tải trang, cho bạn biết rằng tập lệnh đã được tải (và chứa các biến bắt buộc).