[JavaScript]Nakładające się na siebie instrukcje w skrypcie Opcje

[sebap123]

Mam pewnie problem w kodzie strony która pisze przy pomocy Javascript z wykorzystanie jQuery. Chodzi o to, że po dodaniu pól input do pliku i przypisaniu do nich akcji działa zawsze ta ostatnia - jeśli są dwa pola działa drugie, jeśli trzy trzecie itd.
W internecie znalazłem tak na prawdę dwa rozwiązania, a raczej podpowiedzi jednak nie mogę cały czas uzyskać swojego efektu.
Pierwsza było to, żeby funkcja miała inne nazwy (argumenty), u mnie to zawsze występuje, ale dla pewności jeden input po prostu wyświetla alert podczas gdy drugi odwołuje się do docelowej funkcji.
Drugą podpowiedź przedstawię po przedstawieniu kodu:

[JAVASCRIPT] pobierz, plaintext 
newRow.innerHTML = "<a href='#' class='editName'>"+ddList.ddElements[ddList.ddEl.id]+'</a>';
    newRow.innerHTML += ' X:<input type="text" id="x'+ddList.ddEl.id+'" name="x'+ddList.ddEl.id+'" size=3 value=0>';
    var xField = document.getElementById('x'+ddList.ddEl.id);
    xField.relatedElement = newRow;
    newRow.innerHTML += ' Y:<input type="text" id="y'+ddList.ddEl.id+'" name="y'+ddList.ddEl.id+'" size=3 value=0>';
    var yField = document.getElementById('y'+ddList.ddEl.id);
    yField.relatedElement = newRow;
    $(xField).blur(function(){alert('Handler for X.blur() called.')});
    $(yField).blur(function(){ddList.setObjectPosition(yField,obj,'y');});
    if(RegExprText.test(ddList.ddEl.id))
    {
        newRow.innerHTML += '<br>Kolor:';
        var element = document.createElement('input');
        element.setAttribute('id', 'c'+ddList.ddEl.id);
        element.setAttribute('name', 'c'+ddList.ddEl.id);
        element.setAttribute('type', 'text');
        element.setAttribute('class', 'color');
        element.setAttribute('size', '6');
        newRow.appendChild(element);
        var myPicker = new jscolor.color(element, {});
        $(element).blur(function(){ddList.setColor(element,obj);});
    }
    var links = newRow.getElementsByTagName('a');
    var editLink = links[links.length-1];
    editLink.relatedElement = newRow;
    $(editLink).click(function(){ddList.deleteObject(obj,newRow);});
[JAVASCRIPT] pobierz, plaintext 

Druga podpowiedź, mówi żeby najpierw zrobić xField.relatedElement a potem newRow.innerHTML, jednak tutaj nie wiem jak mam to zrobić, skoro później mam dopiero przypisanie obiektu do xField.

Ciekawe jest również to, że zawsze działa ostatnia linijka kodu, czyli akcje editLink.
Będę wdzięczny za podpowiedzi.

Czy ktoś może i pomóc z tym problemem?

[zegarek84]

problem polega na tym, że korzystasz z innerHTML (swoją droga jak już jQ to równoważne jest .html() ;p)... a dokładniej wyjaśnię...

wstawiając elementy przez innerHTML tworzysz nowe - to wiesz gdyż potem szukasz przez document.getElementById... ale nie wiesz, że konstrukcja:
newRow.innerHTML += HTML;
równoważna jest zapisowi:
newRow.innerHTML = newRow.innerHTML + HTML;
gdzie cała zawartość newRow zostaje "wykasowana" i wszystkie elementy zostaną utworzone od nowa, przez co to nie są dokładnie te same elementy choć na takie wyglądają... (brak zdefiniowanych własności wcześniej i handlerów)...

rozwiązanie na szybko dla Ciebie to nie preferowane dalsze korzystanie z innerHTML ale zanim te elementy będziesz wyszukiwał wstaw cały kod html... dopiero potem wyszukuj elementy i dodaj im właściwości, podpinaj zdarzenia itd... ale już potem nie próbuj korzystać z innerHTML na tym elemencie...

rozwiązanie bardziej poprawne to zrezygnować z innerHTML i tworzyć nowe elementy przez DOM i przez DOM je dodawać do drzewa (.appendChild) gdzie nie skasujesz starych a nowe nie musisz wyszukiwać gdyż masz do nich referencję podczas tworzenia w zmiennych...

ps.
.relatedElement chyba nie jest standardową własnością elementów drzewa DOM, w tym przypadku skoro korzystasz z jQuery to może skorzystaj z .data (dodaje też nie standardową własność do elementu data ale masz wtedy tylko jedną taką własność i w niej zamieściłbyś więcej elementów - w zasadzie w tym nowym jQ w data jest tylko identyfikator klucza a wszystkie własności przechowywane są w jQ)

Ten post edytował zegarek84 14.12.2011, 11:04:51

[sebap123]

Wielki dzięki za rzeczową podpowiedź. Mówiąc szczerze to co do tego += to zapomniałem, że to w taki sposób działa. Nie wiem czemu wymyśliłem sobie, że jest to dopisanie do ciągu. No ale na pewno nie wiedziałem tego, że w momencie przepisywania elementu tracone są wszystkie handlery itp.
Jeszcze raz wielki dzięki za odpowiedź.