dynamicznie ustawiając atrybut id elementu wejściowego w IE: alternatywa dla metody setAttribute

Question

Rozważam dynamiczne ustawianie atrybutu ID elementów wejściowych HTML, które są dynamicznie tworzone w mojej aplikacji.

Moja implementacja działa dobrze z metodą setAttribute w przeglądarce Firefox. Wszelkie pomysły i rozwiązania dotyczące działającej implementacji w IE będą mile widziane.

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

I zmodyfikowane niektóre przykładowy kod z blogów dotyczących tego problemu, które sugerują następujący workround. Znowu nieco Firefox działa dobrze, ale nieco IE doens't

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");      

      } 

Cheers.

Answer 1

Ten code praca w IE7 i 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); 

Może problemem gdzie indziej?

Answer 2

Nie wiedziałem o problemie z setAttribute w IE? Jednak można bezpośrednio ustawić właściwość expando na węźle samego:

hiddenInput.id = "uniqueIdentifier"; 

Answer 3

użyć jQuery attr metoda. Działa we wszystkich przeglądarkach.

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

Albo można użyć kodu folowing:

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

Answer 4

documentation mówi:

Kiedy trzeba ustawić atrybuty, które również są odwzorowane na JavaScript dot-własności (takich jak href, style, src lub event-handlers), zamiast tego preferuj to mapowanie.

Tak, wystarczy zmienić id, wartość zadanie i powinno być zrobione.

Answer 5

Zapomnij o setAttribute(): jest poważnie uszkodzony i nie zawsze robi to, czego możesz oczekiwać w starych IE (IE < = 8 i trybach zgodności w późniejszych wersjach). Zamiast tego użyj właściwości elementu. Zasadniczo jest to dobry pomysł, nie tylko w tym konkretnym przypadku. Zamień swój kod z następujących produktów, które będą działać na wszystkich głównych przeglądarek:

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

aktualizacji

Paskudny siekać w drugim bloku kodu w tej kwestii jest zbędne, a przede kod działa poprawnie w wszystkie główne przeglądarki, w tym IE 6. Zobacz http://www.jsfiddle.net/timdown/aEvUT/. Powodem, dla którego uzyskasz null w swoim alert() jest to, że kiedy jest wywoływane, nowe wejście nie jest jeszcze w dokumencie, dlatego wywołanie document.getElementById() nie może go znaleźć.

Answer 6

Miałem ten sam problem! Nie mogłem zmienić/ustawić atrybutu ID elementów. Działa we wszystkich innych przeglądarkach, ale nie w IE.To chyba nie jest istotne dla problemu, ale tutaj jest to, co skończyło się robi:

Tło

Budowałem witryny MVC z kart jQuery. Chciałem dynamicznie tworzyć karty i wykonywać odświeżanie AJAX na serwerze, zapisując kartę w bazie danych. Chciałem użyć unikalnego identyfikatora, w postaci int, dla kart, więc nie wpadłbym w kłopoty, gdyby użytkownik utworzył dwie karty o tej samej nazwie. Że stosuje się wtedy unikatowy identyfikator kart jak:

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

Kiedy następnie realizowane funkcje usunąć, na kartach wywołania zwrotnego wykorzystuje indeksu wiedźma 0 na podstawie. Wówczas nie mogłem odesłać unikalnego identyfikatora do serwera, aby wyrzucić wpis DB. Oddzwanianie do zdarzenia tabremove daje zdarzenie jquery i parametry interfejsu użytkownika. Z jednej linii kodu mogę uzyskać identyfikator rozpiętości:

var dbIndex = event.currentTarget.id; 

Problem polegał na tym, że znacznik rozpiętość nie miał żadnego identyfikatora. Więc w zwrotnego stworzenia Próbowałem ustawić ID kupić wyodrębniania identyfikatora z a href tak:

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

To działało dobrze w FireFox, ale nie w IE. Tak więc spróbowałem kilku innych:

//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); 

Żadna z nich nie zadziałała! Tak więc po kilku godzinach testu i Googelingu zrezygnowałem i wyciągnąłem wniosek, że IE nie może dynamicznie ustawiać atrybutu ID elementu.

Jak mi smutno, prawdopodobnie nie jest to istotne dla twojego problemu, ale myślałem, że się podzielę.

Rozwiązanie

I dla wszystkich z was, którzy znaleźli to przez googleing w kwestii kartach miałem tutaj jest to, co skończyło się robi w zwrotnego tabsremove rozwiązać problem:

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

Prawdopodobnie nie najseksowniejsze rozwiązanie, ale hej to rozwiązało problem. Jeśli ktokolwiek ma jakiekolwiek dane wejściowe, proszę podziel się ...