Question

我在构建页面时创建了许多选择列表（下拉列表）。下拉列表基于外部数据文件，因此我在运行时设置了id。像

这样的东西

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

如何添加事件监听器，因为我提前不知道ID？我可以在ID中搜索所有带有“TypeA”的id的DOM，只需为每一个id添加一个监听器吗？

我知道如何在javascript中触发onLoad（）方法，在页面加载后，我只想知道如何搜索DOM以查找其中包含特定字符串的ID。感谢。

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');

现在，您可以使用for循环将处理程序绑定到数组中的每个元素。

Answer 2

如果你使用jQuery，你可以这样做：

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

Answer 3

您可以内联添加事件侦听器并直接传递元素。

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

您可以做的另一件事是传递事件属性，如下所示：

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

然后在myfunction中，event.target将是触发调用的元素。您可以使用event.target.id获取ID。

Answer 4

如果您无法明确知道该ID，则可以执行其他操作。

一种选择是使用类名;另一个选择是在ID之前加上一些静态的东西（用jquery的说法）你可以使用一个启动选择器。

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

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

它可以工作，但它不是最好的做事方式，特别是如果你有多个生成元素。它也相对较慢。

按CSS类名选择可能是最好的方法。

Answer 5

如果你使用jQuery查询选择器轻松使用jQuery。但如果没有：

在元素中添加一个类：

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

使用getElementsByClassName来覆盖您的元素

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

循环元素并添加事件侦听器

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

我知道getElementsByClass名称在IE6中不起作用（或7也是？）。但这是我的解决方案。也许我可以用x-browser解决方案更新它

html在不知道id的情况下动态添加事件监听器

5 个答案: