การเปลี่ยนแปลงวิธีที่ Drupal 7 จัดการกับ JavaScript และ jQuery

14

ขณะนี้ฉันกำลังพัฒนาสคริปต์ JavaScript ที่ทำงานบนหน้าการดูแลระบบ ฉันอ่านการเปลี่ยนแปลงที่เกิดขึ้นใน Drupal 7 นั่นคือการย้ายจากdocument.ready()ไปยังฟังก์ชั่น jQuery ของตัวเอง อย่างไรก็ตามสคริปต์ต่อไปนี้ใช้งานไม่ได้

(function ($) {
  console.log('hello');
  $('#edit-apiusername').append('test');
})(jQuery);

console.log()กำลังลุกไหม้และฉันสามารถเห็นผลลัพธ์ แต่ผนวกง่ายไม่ทำงาน ID เขตข้อมูลถูกต้อง
ฉันไม่แน่ใจว่าสิ่งที่ฉันหายไปที่นี่ แต่ฉันสงสัยว่ามันจะเกี่ยวข้องกับวิธีการอ้างอิงวัตถุ มองไปที่โค้ด JavaScript ของ Views 3 ฉันสามารถเห็นได้ว่ามันทำไปในทำนองเดียวกัน

7 javascript

— ดิจิทัล
แหล่งที่มา

ถ้าคุณ console.log ($ ('# edit-apiusername')); มันส่งออกวัตถุคือองค์ประกอบที่ถูกพบบนหน้าโดย jQuery?

— budda

ถึงแม้จะมี Drupal 6 คุณควรจะใช้พฤติกรรม Drupal document.readyแทน สิ่งที่คุณกำลังรายงานไม่เฉพาะเจาะจงกับ Drupal 7

— kiamlaluno

28

ฉันคิดว่าคุณเข้าใจผิดการเปลี่ยนแปลง

ควรห่อโค้ด JavaScript (function ($) { ... })(jQuery);เพื่อให้สามารถใช้$เป็นทางลัดjQueryได้ นี้คือการอนุญาตให้jQuery ที่จะเล่นอย่างกับห้องสมุดอื่น ในฟังก์ชั่นนี้คุณยังต้องรอให้โหลด DOM หากคุณต้องการแก้ไข นั่นคือสิ่งที่ห่อรหัสของคุณjQuery.ready(function(){ ... })ทำ

แต่แทนที่จะใช้jQuery.ready(function(){ ... })คุณควรใช้พฤติกรรมเพื่อให้ JavaScript ของ Drupal รู้ว่าโค้ดของคุณต้องการประมวลผลสิ่งใดก็ตามที่เพิ่ม ( หรือลบออก ) จาก DOM

(function ($) {
  Drupal.behaviors.exampleModule = {
    attach: function(context, settings) {
      $(context).find('#edit-apiusername').append('test');
    }
  }
})(jQuery);

— Pierre Buyle
แหล่งที่มา

1

นอกจากนี้คุณยังอาจพิจารณานามแฝงวัตถุ jQuery ทั้งหมดเป็นตัวแปรอื่นที่คุณเลือกเช่นใน:

$j = jQuery.noConflict();

คุณจะวางสิ่งนี้ไว้นอกคำสั่งที่พร้อมจะปล่อยให้มันสามารถเข้าถึงได้นอกการห่อหุ้ม

— Artur
แหล่งที่มา