Изменения в том, как Drupal 7 обрабатывает JavaScript и jQuery


14

В настоящее время я разрабатываю сценарий JavaScript, который выполняется на странице администрирования. Я прочитал об изменениях, внесенных в Drupal 7, а именно о переходе document.ready()к собственной функции jQuery. Однако следующий скрипт не работает.

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

console.log()стреляет, и я вижу результат, но простое добавление не работает. Идентификатор поля правильный.
Я не уверен, что мне здесь не хватает, но я подозреваю, что это связано с тем, как я ссылаюсь на объект. Глядя на JavaScript-код Views 3, я вижу, что он сделан аналогичным образом.


Если вы console.log ($ ('# edit-apiusername')); выводит ли он объект, т.е. находится ли элемент на странице с помощью jQuery?
Будда

Даже с 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);

1

Вы также можете рассмотреть возможность наложения псевдонима всего объекта jQuery на другую переменную по вашему выбору, например:

$j = jQuery.noConflict();

Вы должны поместить это вне оператора ready, чтобы оставить его доступным вне инкапсуляции.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.