HTML динамически добавлять слушатели событий, не зная идентификатор

Question

Я создаю много списков выбора (выпадающих), когда я создаю страницу.Выпадающие списки основаны на внешних файлах данных, поэтому я устанавливаю идентификаторы во время выполнения.Что-то вроде

<% name="TypeA" + specialIDString %>
<select  id="<%= name %>" >
blah
blah 
</select>

Как мне тогда добавить прослушиватель событий, так как я заранее не знаю идентификатор?Могу ли я найти в DOM все идентификаторы с «TypeA» в идентификаторе и просто добавить прослушиватель для каждого из них?

Я знаю, как вызвать метод onLoad () в javascript, после загрузки страницы я просто хочу узнать, как искать в DOM, чтобы найти идентификаторы с определенной строкой в ​​них.Спасибо.

Answer 1

Только для справки, ванильный ответ JavaScript:

function getElementsByIdStartsWith( type, idStartsWith ) {
    var arr = [],
        all = document.getElementsByTagName( type );

    for ( var i = 0; i < all.length; i++ ) {
        if ( all[i].id.indexOf( idStartsWith ) === 0 ) {
            arr.push( all[i] );
        }
    }

    return arr;
}

и затем:

var selects = getElementsByIdStartsWith('select', 'TypeA');

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

Answer 2

Вы можете добавить встроенный прослушиватель событий и напрямую передать элемент.

<select onclick="myfunction(this)" id="<%= name %>" >
blah
blah 
</select>

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

<select onclick="myfunction(event)" id="<%= name %>" >
blah
blah 
</select>

Затем в myfunctionevent.target будет элементом, который инициировал вызов.Вы можете получить идентификатор с event.target.id.

Answer 3

Если вы используете jQuery, вы можете сделать это просто так:

$('select[id^=TypeA]').bind('yourevent', function() {});

Answer 4

если у вас есть jQuery, это просто с помощью селектора запросов jQuery.но если нет:

1. Добавьте класс к своему элементу:

   <% class="myClass" name="TypeA" + specialIDString %>
   <select  id="<%= name %>" >
       blah
       blah 
   </select>
   

2. Используйте getElementsByClassName, чтобы добраться до ваших элементов

   var myElems = document.getElementsByClassName('myClass');
   

3. Зацикливание элементов и добавление прослушивателя событий

   for(var i=0; i<myElems.length;  i++){
       myElems[i].addEventListener('click', function(){}, false);
   }
   

Я знаю, что имя getElementsByClass не работает в IE6 (или 7 также?).Но это мое решение.Может быть, я смогу обновить его с помощью решения x-browser

Answer 5

Если вы не можете точно узнать идентификатор, есть другие вещи, которые вы можете сделать.

Один из вариантов - использовать имя класса; другой вариант заключается в добавлении идентификатора к чему-то статическому, и (на языке jquery) вы можете использовать селектор начала с.

<select id="generated<%=name%>">

var mySelect = $('select[id^=generated]');

Это будет работать, но это не лучший способ сделать что-то, особенно если у вас будет более одного сгенерированного элемента. Это также относительно медленно.

Выбор по имени CSS, вероятно, будет лучшим способом.