無法附加事件偵聽器來動態地在IE8中創建的元素

概述：無法附加事件偵聽器來動態地在IE8中創建的元素

當我點擊一個按鈕，我想

在一張桌子
拷貝的末尾插入新行從表中的第一行的單元和內容
給唯一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/

來源

2013-08-21 Sajjan Sarkar

如果從字面上'$ this.focus改變（''到$ this.onfocus ='解決問題，問題就在那裏，但我懷疑這只是一個錯字你的問題。 –

jQuery的哪個版本？ – SLaks

@KevinB好吧，我想知道是什麼問題？爲什麼它不能以第一種方式工作？ –

-4

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

試試上面的代碼......這應該工作..

來源

2013-08-21 19:17:05 Keval

已過時的方法... – Johan

它並沒有回答這個問題。 –

編輯

對不起，我剛纔注意到你想了解你的代碼中的錯誤您的評論。我可以很快地告訴你一個錯誤，那就是混合使用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-21 19:25:07 Adam

這是一個乾淨利落的做法。感謝和代碼+1。但正如我所提到的，這更多的是一個知識問題，讓我明白爲什麼我的代碼不工作。再次感謝:) –

我的評論去之前你的更新來了大聲笑 –

*「混合jQuery和原生DOM方法」*錯誤？ –

通過你輸入你並不需要循環，並結合重點處理程序，以每個人，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-21 19:35:20 Adam

在IE8中不起作用 –

無法附加事件偵聽器來動態地在IE8中創建的元素

回答

相關問題