Статьи

элементы jQuery bind () с одинаковым идентификатором

Март 7, 2019

Хорошо, каким-то образом вам удалось попасть в ситуацию, когда вам нужно привязать элементы одного и того же идентификатора. Теперь, если вы можете, вы должны добавить класс к каждому элементу и привязать к нему!

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

Эта маленькая функция находит элементы с двойными идентификаторами. 

(function(document, $){
    // little debug helper script to notify us when the
    // dom is updated with a contains duplicate ID'd elements
    $(document).bind('DOMNodeInserted', function (event) {

        var duplicateDomElements = [];

        $('[id]').map(function () {
            var ids = $('[id=' + this.id + ']');
            if (ids.length > 1 && ids[0] == this) {
                duplicateDomElements.push(this.id);
            }
        });

        if (duplicateDomElements.length > 0) {
            alert('Recent action duplicated a dom element ID with name(s) [' + duplicateDomElements + ']');
        }

    });
})(document, jQuery);

Примечание: использование div # id иногда приводит к более медленному результату, чем просто #id, поэтому будьте осторожны, сколько предыдущих тегов вы поместили в свои селекторы. Также в качестве подсказки, если два класса вызывают одну и ту же функцию, вы можете добавить селекторы вместе следующим образом: 

 $('.clickButton1, .clickButton2').bind('click', function() {
	//your code
}

//instead of 

$('.clickButton1').bind('click', function() {
	//your code
}

$('.clickButton2').bind('click', function() {
	//your code
}

Остановка действия над дублирующими элементами

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

 e.preventDefault();
e.stopImmediatePropagation();

Дальнейшие проблемы: присвоение классов элементам с одинаковым идентификатором

.each применяет тег класса к первому элементу с этим идентификатором

0 [object HTMLDivElement]
SSP0
0 [object HTMLDivElement]
SSP0

Если вы примените «div» к селектору jQuery, похоже, он будет работать. 

 $('div#searchResultsContainer').each(function(index, value)
{		
console.log(index);					
    // $(this).addClass('SSP'+index);
});

Также смотрите: привязка jquery к созданным элементам

33
Share: