Drupal 7이 JavaScript 및 jQuery를 처리하는 방식의 변화

14

현재 관리 페이지에서 실행되는 JavaScript 스크립트를 개발 중입니다. Drupal 7의 변경 사항, 즉 document.ready()자체 jQuery 함수로 의 이동에 대해 읽었습니다 . 그러나 다음 스크립트는 작동하지 않습니다.

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

console.log()발사 중이며 출력을 볼 수 있지만 간단한 추가 기능이 작동하지 않습니다. 필드 ID가 정확합니다.
여기서 누락 된 것이 확실하지 않지만 객체를 참조하는 방식과 관련이 있다고 생각합니다. Views 3 JavaScript 코드를 보면 비슷한 방식으로 수행 된 것을 볼 수 있습니다.

7 javascript

— 디지털
소스

console.log ($ ( '# edit-apiusername')); 객체를 출력합니까, 즉 jQuery가 페이지에서 요소를 찾습니까?

— budda

Drupal 6을 사용하더라도 대신 Drupal 동작을 사용해야했습니다 document.ready. 보고 한 내용은 Drupal 7에만 국한되지 않습니다.

— kiamlaluno

28

나는 당신이 변화를 오해했다고 생각합니다.

바로 가기로 (function ($) { ... })(jQuery);사용할 수 있도록 JavaScript 코드를 래핑해야합니다 . 이것은 jQuery가 다른 라이브러리와 잘 작동 하도록 하기위한 것 입니다. 이 함수에서 DOM을 변경하려면 DOM이로드 될 때까지 기다려야합니다. 그것이 코드를 감싸는 것 입니다.$jQueryjQuery.ready(function(){ ... })

그러나 사용하는 대신 jQuery.ready(function(){ ... }), 당신은해야 비헤이비어를 사용 드루팔의 자바 스크립트 코드를 처리 아무것도 추가 (원하는 것을 알고 있도록 하거나 제거 는 DOM에서).

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

— 피에르 바이 글
소스

1

다음과 같이 전체 jQuery 객체를 선택한 다른 변수로 별칭을 지정할 수도 있습니다.

$j = jQuery.noConflict();

캡슐화 외부에서 액세스 할 수 있도록 준비된 명령문 외부에 배치하십시오.

— 아르투르
소스