2013-10-01 1 views
0

у меня есть, если заявление, что в настоящее время работает нормально:JQuery, как использовать на() с, если заявление

if ($('div').hasClass('is-sticky')) { 
    $('body').addClass('has-sticky'); 
} 

Однако динамически добавляется к разметке от другой класс «.а липкий» Плагин jQuery. Поэтому я понял, что мне нужно использовать on(), чтобы постоянно следить за добавлением или удалением этого класса. Но я не могу понять, как использовать on() с моим текущим оператором if.

Я бы хотел, чтобы «.-Липкий» динамически добавлялся и удалялся, а затем добавлял к телу, когда он присутствует, класс «.has-sticky».

Спасибо!

+2

Нет, это не то, что 'on' для ... – PSL

+1

Поскольку это довольно установлено, что вы не можете контролировать классы, как это (по крайней мере, не без MutationObservers), что вы на самом деле пытаетесь достичь путем мониторинга этот класс? Может быть, кто-то может предложить лучший способ. – dherman

+0

Что бы я хотел сделать, это следить за тем, чтобы класс, «.-Липкий», динамически добавлялся в div. Если этот класс существует, тогда мой jQuery добавит класс в тег body. Я думал, что 'live()' может наблюдать за селекторами сейчас и в будущем, и так как это лишено, я думал, что 'on()' сделает это. Благодаря! –

ответ

0

.on() предназначен для привязки обработчиков событий к селектору, элементы соответствия которого могут изменяться динамически. Но вы не привязываете обработчик событий (при изменении классов не происходит никакого события), поэтому в этом случае это не помогает.

Вы можете использовать setInterval() периодически проверять и обновлять класс:

setInterval(function() { 
    $('body').toggleClass('has-sticky', $('div').hasClass('is-sticky')); 
}, 1000); 
0

Вы не можете использовать .on() для мониторинга, когда добавляется или удаляется класс из объекта DOM. jQuery не предлагает эту возможность.

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

  1. После любой из операций, которые могли бы изменить класс (вы должны знать это, если все это ваш код) , то вы можете вызвать функцию, которая проверяет класс и выполняет свою работу, если класс был изменен.

  2. Вы можете изменить все места в коде, которые модифицируют этот класс, чтобы либо запустить собственное событие изменения, либо вызвать вашу собственную функцию, а затем выполнить свою работу, обработав это событие или в этой функции.

  3. Вы можете использовать таймер интервала для опроса DOM и поиска изменений (не рекомендуется).

  4. Вы можете выяснить, может ли любой из DOM mutation observers делать то, что вы хотите, и поддерживаться в достаточном количестве браузеров для решения вашей проблемы.

+0

'live()' описывается как: Прикрепить обработчик событий для всех элементов, которые соответствуют текущему селектору, сейчас и в будущем. Так что я думал, что 'on()' может быть в состоянии соответствовать селекторам, добавленным в будущем, так как он, как говорят, заменил 'live()' Я не парень JS, поэтому я едва успеваю на что Я знаю, как это сделать с jQuery. Любые другие предложения по достижению того, что я хочу, будут полезны. Благодаря! –

+0

@ Mark.C - '.on()' регистрирует обработчики событий для таких событий, как «click» или «keydown» или «mousemove» и т. Д. Изменение класса в объекте DOM не вызывает какого-либо события таким образом , '.on()' нецелесообразно наблюдать за изменением класса. Если у браузера был вызов события 'classChanged', который был запущен на любом объекте DOM при изменении класса, вы были бы на небесах с' .on ("classChanged") ', но такой вещи не существует. – jfriend00

0

Почему бы вам не создать настраиваемый триггер, когда вы добавляете этот .is-липкий класс в элемент?

Обработчик триггер будет что-то вроде:

$('body').on('classAdded', function() { 
    $(this).addClass('has-sticky'); 
}); 

И блок триггер будет как:

function whatever() { 
    // logic that adds the class to $('div') ....... 
    // at this point, your $('div') has the is-sticky class already right? 
    $('body').trigger('classAdded'); 
} 

Блок триггер будет как и любое другое событие, как щелчок/MouseEnter, который будет вызывать обработчик. Хотя это может быть и вызов функции ...

0

Это, вероятно, довольно хаки, но вы можете определить очень короткий переход CSS для этого класса is-sticky, а затем привязать к событию transitionend. Используя это, вы должны знать, когда этот класс был добавлен в IE10 + и вечнозеленых браузерах.не

https://developer.mozilla.org/en-US/docs/Web/Reference/Events/transitionend

 Смежные вопросы

  • Нет связанных вопросов^_^