Question

概览

当我点击我想要的按钮时

在表格末尾插入新行
复制表格第一行的单元格和内容
为单元格内的元素提供唯一的ID
将焦点事件侦听器分配给页面中的所有输入。

问题：

事件处理程序未触发IE8中的正确元素。例如，如果我专注于表格中的最后一个输入，则第一个输入会突出显示。

澄清：

适用于IE10，Chrome。
在我的目标浏览器IE8中不起作用。
我知道方法绕过这个。我的目标不是找到一个解决方法，而是在给定的代码中理解我的错误。
示例代码只是问题的快速简化版本。我不是要求与问题无关的代码优化。
更改事件也不起作用。

CODE：

HTML：

<table width="200" border="1" id="myTable">
    <tr>
        <td>
            <input type='text' id='row0col0' name='row0col0'>
        </td>
    </tr>
</table>
<button id="addRow">Add Row</button>

JS：

function addFocusListener() {
     $("input").unbind();
     $("input").each(function () {
         var $this = $(this);
         $this.focus(function () {
             var newThis = $(this);
             newThis.css('background-color', 'red');
         });    
     });
 }

 function addRowWithIncrementedIDs() {
     var table = document.getElementById("myTable");
     var newRow = table.insertRow(-1);
     var row = table.rows[0];
     var rowNum = newRow.rowIndex;
     for (var d = 0; d < row.cells.length; d++) {
         var oldCell = row.cells[d];
         newCell = oldCell.cloneNode(true);
         newRow.appendChild(newCell);

         for (var c = 0; c < newCell.childNodes.length; c++) {
             var currElement = newCell.childNodes[c];
             var id = "row" + rowNum + "col" + d;
             $(currElement).attr('name', id);
             $(currElement).attr('id', id);
         }
     }
 }    
 $(document).ready(function () {

     $("#addRow").click(function () {
         addRowWithIncrementedIDs();
         addFocusListener();
     });
 });

其他有效的方法：

从jQuery绑定更改为常规JS绑定。来自
```
$this.focus(function () {....});    
```
要
this.onfocus =function () {....};
在渲染时附加事件处理程序。

FIDDLE：

http://jsfiddle.net/sajjansarkar/GJvvu/

相关链接：

jQuery event listener doesn't work in IE 7/8

Answer 1

修改

抱歉，我刚刚注意到您的评论，您希望了解代码中的错误。我可以快速告诉你一个错误，那就是混合jQuery和本机DOM方法。如果您专注于使用功能非常强大的库，那么请使用它的所有功能，而不仅仅是您理解的功能。

以下代码使用事件委托（以解决您的聚焦问题）和jQuery方法更简单地向表中添加行而不是本机方法。

如果您打算使用jQuery，那么您也可以一直使用它：

var t = $('#myTable'); $(document) .on('focus','#myTable input',function() { $(this).css('background','red') }) .on('click','#addRow',function() { //create a new row var newIndex, r = t.find('tr').eq(0).clone(); //append it to the table r.appendTo(t); //update newIndex - use it for later newIndex = r.index(); //update the name/id of each of the inputs in the new row r.find('input').each(function() { var el = $(this), id = 'row'+newIndex+'col'+el.closest('td').index(); el.attr('id',id).attr('name',name); }); });

http://jsfiddle.net/GJvvu/1/

Answer 2

您不需要遍历输入并将焦点处理程序绑定到每个输入，jQuery会自动收集与选择器匹配的所有DOM元素，并在每个元素上执行它的焦点API函数：

改变这个：

function addFocusListener() {
     $("input").unbind();
     $("input").each(function () {
         var $this = $(this);
         $this.focus(function () {
             var newThis = $(this);
             newThis.css('background-color', 'red');
         });    
     });
 }

到此

function addFocusListener() {
 $('input')
   .unbind()
   .focus(function(){
     $(this).css('background-color','red');
   });
}

Answer 3

$("#addRow").live("click", function(){
 addRowWithIncrementedIDs();
 addFocusListener();
 });

尝试上面的代码...这应该有用..

无法将事件侦听器附加到IE8中动态创建的元素

3 个答案: