IE、Safari、Firefox 中的动态 OnClick

Question

我有以下代码。我正在尝试根据第一个下拉列表中的选择动态地将下拉选项添加到第二个下拉列表中。两者都是通过对从数据库中提取数据的脚本的 Ajax 调用生成的。这是相关代码。

 function setSub(doc) {
  // Setup some variables
  var sNode = document.getElementById('4'); // GRAB THE ELEMENT HERE
  var rmiData = doc.getElementById('rmiData').innerHTML;
  var aItems = rmiData.split("|");
  var aVals;
  // Set some background
  sNode.style.background = "#fff";
  // Loop through adding options to the drop down
  for (var x = 0; x < (aItems.length -1); x ++) {
   aVals = aItems[x].split("=");
   // ADD OPTIONS DYNAMICALLY TO SECOND DROP-DOWN HERE
   sNode.options[x+1] = new Option(aVals[1],aVals[0],false,false);
   // PROBLEM HERE: ADD ONCLICK TO THE OPTION WE JUST CREATED
   sNode.options[x+1].onclick = function() { fixDayList(); };
   //sNode.options[x+1].onclick = new Function("fixDayList();");
   //sNode.options[x+1].setAttribute("onclick", "fixDayList();");
   // END PROBLEM LINES
  }
  // Set the length
  sNode.length = x+1;
  // Select the first item in the list
  sNode[0].selected = true;
 }

如果您注意到“// PROBLEM HERE”行之后的部分，我尝试以三种不同的方式添加 onclick 事件。所有 3 在 Firefox 中都能正常工作。这 3 个都不能在 IE6 或 Safari 中工作（在 IE8 上不确定）。对此有什么建议吗？其余代码使用了一些老式的 JavaScript，这些 JavaScript 是我从现有的一段有效的遗留代码中复制而来的，我只是想将 onclick 添加到我的版本中（最好不要重新编写大量代码）。

关于为什么 Safari 和 IE 不触发 onclick 事件有什么想法吗？

我确实可以在我的代码中访问 jQuery。所以，如果 jQuery 在内部解决了这个问题，并且我可以找出要使用的正确选择器，那将起作用。但是，我不确定如何准确地选择它。我试过了：

$('#4').options[x+1].click( function() { fixDayList(); } );

但是那个选择器很糟糕，我不确定如何选择正确的选择器（我在 jQuery 方面是绿色的）。

Answer 1

使用这样的东西：

if(window.addEventListener){
   sNode.options[x+1].addEventListener('click', fixDayList, false);
} else if (window.attachEvent){
   sNode.options[x+1].attachEvent('onclick', fixDayList);
} else {
   sNode.options[x+1].onclick = fixDayList;
}

更新：

在 Safari 中，除非 option 元素可见且不显示为下拉列表，否则它们永远不会触发 click 事件。但是，如果您将size=10 或其他任何内容添加到您的select 元素，Safari 将触发option 元素上的点击事件。

最好的办法是在select 元素上监听change 事件，而不是尝试在options 上使用click。