在IE中動態設置輸入元素的id屬性：替代setAttribute方法

我正在尋找動態設置在我的應用程序中動態創建的HTML Input元素的ID屬性。在IE中動態設置輸入元素的id屬性：替代setAttribute方法

我的實現可以在Firefox中使用setAttribute方法。任何想法或解決方案在IE中的工作實現將不勝感激。

var hiddenInput = document.createElement("input"); 
    hiddenInput.setAttribute("id", "uniqueIdentifier"); 
    hiddenInput.setAttribute("type", "hidden");      
    hiddenInput.setAttribute("value", ID); 
    hiddenInput.setAttribute("class", "ListItem");

我修改了一些與這個問題有關的博客示例代碼，提示以下workround。再次，Firefox位運行良好，但IE位不確定

var hiddenInput = null; 

try { 
hiddenInput = document.createElement('<input name=\''+"hiddenInputName"+'\' />'); 
        hiddenInput.id = "uniqueIdentifier"; 
        //alert(document.getElementById("uniqueIdentifier")); 
        hiddenInput.type = "hidden"; 
       } catch (e) { }    
       if (!hiddenInput || !hiddenInput.name) { // Not in IE, then 
        var hiddenInput = document.createElement("input"); 
    hiddenInput.setAttribute("id", "uniqueIdentifier"); 
    hiddenInput.setAttribute("type", "hidden");      

      }

乾杯。

來源

2011-01-31 Terman

你測試哪個版本的IE？ – gor 2011-01-31 15:14:42

Internet Explorer 8 – Terman 2011-01-31 15:35:18

什麼不工作？是否有錯誤訊息？出了什麼問題？ – 2011-01-31 15:51:28

這code工作在IE7和Chrome：

var hiddenInput = document.createElement("input"); 
    hiddenInput.setAttribute("id", "uniqueIdentifier"); 
    hiddenInput.setAttribute("type", "hidden");      
    hiddenInput.setAttribute("value", 'ID'); 
    hiddenInput.setAttribute("class", "ListItem"); 

$('body').append(hiddenInput);

也許問題別的地方？

來源

2011-01-31 15:13:08 gor

我沒有意識到在IE中setAttribute有問題嗎？然而，你可以直接設置節點本身的expando屬性：

hiddenInput.id = "uniqueIdentifier";

來源

2011-01-31 14:01:51 jAndy

使用jQuery attr方法。它適用於所有瀏覽器。

var hiddenInput = document.createElement("input"); 
$(hiddenInput).attr({ 
    'id':'uniqueIdentifier', 
    'type': 'hidden', 
    'value': ID, 
    'class': 'ListItem' 
});

或者你可以使用如下因素代碼：

var e = $('<input id = "uniqueIdentifier" type="hidden" value="' + ID + '" class="ListItem" />');

來源

2011-01-31 14:02:08 gor

的documentation說：

當你需要設置也被映射到一個JavaScript點屬性的屬性（如href，style，src或event-handlers），而是支持該映射。

因此，只要改變ID，值分配，你應該做的。

來源

2011-01-31 14:25:55 gor

忘記setAttribute()：這是嚴重損壞，並不總是做你可能期望在舊的IE瀏覽器（IE < = 8和兼容模式在更高版本）。改用元素的屬性。這通常是一個好主意，不僅僅是針對這種特殊情況。用下面的，這將在所有主要的瀏覽器中運行替換代碼：

var hiddenInput = document.createElement("input"); 
hiddenInput.id = "uniqueIdentifier"; 
hiddenInput.type = "hidden";      
hiddenInput.value = ID; 
hiddenInput.className = "ListItem";

更新

在第二個代碼塊討厭的黑客的問題是不必要的，代碼在上面正常工作所有主流瀏覽器，包括IE 6.請參閱http://www.jsfiddle.net/timdown/aEvUT/。您在alert()中獲得null的原因是當它被調用時，新的輸入尚未出現在文檔中，因此document.getElementById()調用找不到它。

來源

2011-01-31 15:04:35

我有同樣的問題！我無法更改/設置元素的ID屬性。它適用於所有其他瀏覽器，但不適用於IE。這可能是不相關的問題，但這裏是我落得這樣做：

背景

我是建設一個MVC的網站使用jQuery的標籤。我想動態創建選項卡，並執行AJAX回發到保存數據庫中的選項卡的服務器。我想爲標籤使用一個唯一的標識符（以int的形式），所以如果用戶創建了兩個具有相同名稱的標籤，我不會遇到麻煩。然後我使用的唯一ID來標識類似的選項卡：

<ul> 
<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove List</span></li> 
<ul>

當我然後執行上回調使用該索引的選項卡的刪除功能，女巫是基於0。然後我無法將唯一ID發送回服務器以垃圾回收數據庫條目。 tabremove事件的回調給出了jquery事件和UI參數。用一行代碼我可以得到範圍的ID：

var dbIndex = event.currentTarget.id;

問題是span標籤沒有任何ID。因此，在創建回調我試圖設置ID購買從這樣的A HREF提取ID：

ui.tab.parentNode.id = ui.tab.href.substring(ui.tab.href.indexOf('#list-') + 6);

在Firefox，但不是在IE工作得很好。所以我嘗試了其他幾種：

//ui.tab.parentNode.setAttribute('id', ui.tab.href.substring(ui.tab.href.indexOf('#list-') + 6)); 
//$(ui.tab.parentNode).attr({'id':ui.tab.href.substring(ui.tab.href.indexOf('#list-') + 6)}); 
//ui.tab.parentNode.id.value = ui.tab.href.substring(ui.tab.href.indexOf('#list-') + 6);

沒有人工作！所以經過幾個小時的測試和Googeling之後，我放棄了，得出結論：IE不能動態地設置元素的ID屬性。

傷心，這可能與您的問題無關，但我想我會分享。

解決方案

而對於大家誰通過Googleing選項卡上的問題我在這裏發現了這是我結束了在tabsremove回調做來解決這個問題：

var dbIndex = event.currentTarget.offsetParent.childNodes[0].href.substring(event.currentTarget.offsetParent.childNodes[0].href.indexOf('#list-') + 6);

可能不是最性感的解決方案，但嘿它解決了這個問題。如果有人有任何輸入，請分享...

來源

2011-03-13 01:37:57

在IE中動態設置輸入元素的id屬性：替代setAttribute方法

回答

相關問題