1

概述：

当我单击一个按钮时，我想

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

问题：

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

澄清：

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

代码：

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();
     });
 });

其他可行的方法：

  1. 从 jQuery 绑定更改为常规 JS 绑定。即从

    $this.focus(function () {....});

    至
    this.onfocus =function () {....};

  2. 在呈现事件处理程序时附加它们。

小提琴：

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

SO中的相关链接：

jQuery 事件监听器在 IE 7/8 中不起作用

4

3 回答 3

2

编辑

抱歉，我刚刚注意到您想了解代码中的错误的评论。我可以快速告诉你一个错误，那就是混合使用 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/

于 2013-08-21T19:25:07.157 回答
0

您不需要遍历输入并将焦点处理程序绑定到每个输入，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');
   });
}
于 2013-08-21T19:35:20.600 回答
-4 
$("#addRow").live("click", function(){
 addRowWithIncrementedIDs();
 addFocusListener();
 });

试试上面的代码......这应该工作..

于 2013-08-21T19:17:05.410 回答