Как я могу предотвратить несколько узлов в виджете в JQuery?

Question

Допустим, у меня есть плагин jquery под названием widget, который можно использовать для нескольких элементов

например $('.myClass').widget();

После загрузки страницы я динамически добавляю HTML, который содержит больше элементов, которыеиметь класс myClass.Если я снова выполню приведенный выше код, ранее загруженные виджеты будут снова инициализированы.

Одно из решений, которое я придумал, - удалить класс myClass после инициализации виджета.

Другая идея заключается в использовании .data() и сохранении проверки флага инициализации, если он существует, когда плагин загружается.

Есть ли лучший способ сделать это?

Answer 1

Я бы сказал, просто добавьте новый класс при его инициализации и используйте селектор not, чтобы исключить элементы, имеющие этот класс.

//Only will work once per element, no matter how many times you run it.
$('.myClass').not('.initialized').widget().addClass('initialized');

Answer 2

Каркас виджетов jQueryUI генерирует псевдо-селекторы, поэтому, если ваш виджет называется «myWidget», вы можете использовать эту строку, чтобы проверить, была ли она инициализирована:

$("#element").is(":ui-myWidget")

Answer 3

$(".myClass-init").widget().removeClass(".myClass-init")

Добавить новый класс с именем myClass-init

Это означает, что вы можете продолжать использовать myClass для стилевого оформления CSS и использовать отдельный новый класс просто для функциональности.

Вы можете использовать атрибуты data-, но селекторы для них медленнее. Вопрос в том, считаете ли вы data- атрибуты более семантическими, чем дополнительные class