Buongiorno a tutti,
Come da oggetto ho un grosso problema nel gestire propriamente gli event listener in nuovi elementi della pagina.
In sostanza adesso ho un div cliccabile che contiene uno span con un testo. Quando un utente clicca sullo span il suo contenuto dovrebbe essere salvato, il click sul div disabilitato e dovrebbe invece comparire un input text (con il testo eventualmente contenuto nello span) con un pulsante di conferma che permettano di cambiare il contenuto dello span.
All'ok la textbox e il pulsante devono scomparire e deve ricomparire la span precedente con il testo aggiornato.
Il codice (per altro mi sembra apparentemente molto banale!) deve andare su tutti i più diffusi browser.
Premetto che è la prima volta che uso direttamente javascript e DOM, e di solito questi problemi li bypasso tramite framework stile jquery. Questa volta però sono obbligato per causa esterna a fare tutto secondo "standard" DOM e javascript senza l'ausilio di qualsivoglia framework.
Il primo problema che ho avuto è che firefox mi eseguiva direttamente gli eventi onclick associati a un oggetto tramite javascript e ie invece si bloccava proprio.
(ho già provato a usare .onclick .click .addEventListener e chi più ne ha più ne metta! ma con lo stesso risultato!)
Dopo aver letto su internet le varie problematiche nella gestione degli event handler su diversi browser ho creato un enum con una serie di funzioni che mi garantissero la compatibilità tra i browser. In questo caso il browser crasha proprio! Sono disperato...Per una stupidata di funzione non so più cosa fare!!
Chiedo a questo punto gentilmente un vs. suggerimento,
Grazie,
Luca
codice:
// JavaScript Document
function modTitle(){
var currentContent = document.getElementById("formTitle");
EventUtil.removeEvent(currentContent, 'click', modTitle(), false);
var textInput = document.createElement("input");
textInput.setAttribute("type", "text");
if(currentContent.childNodes[3].innerHTML == "Fare click per inserire un titolo") textInput.setAttribute("value", "");
else textInput.setAttribute("value", currentContent.childNodes[3].innerHTML);
var confirmButton = document.createElement('input');
confirmButton.setAttribute("type", "button");
confirmButton.setAttribute("value", "Change title");
EventUtil.addEvent(confirmButton, 'click', modTitleConfirm(currentContent.childNodes[3].innerHTML), false);
currentContent.removeChild(currentContent.childNodes[3]);
currentContent.appendChild(textInput);
currentContent.appendChild(confirmButton);
}
function modTitleConfirm(oldContent){
var currentContent = document.getElementById("formTitle");
var spanTitle = document.createElement("span");
if(currentContent.childNodes[3].value == "") spanTitle.innerHTML = oldContent;
else spanTitle.innerHTML = currentContent.childNodes[3].value;
currentContent.removeChild(currentContent.lastChild);
currentContent.removeChild(currentContent.lastChild);
currentContent.appendChild(spanTitle);
currentContent.onclick = modTitle();
EventUtil.addEvent(button, 'click', modTitle(), false);
}
var EventUtil = {
addEvent: function(element, eventType, callback, useCapture) {
try { // FireFox
element.addEventListener(eventType, callback, useCapture);
return true;
} catch(errIE) {
try { // IE
return element.attachEvent('on'+ eventType, callback);
}catch(error){ // General error
console.log('Impossibile generare evento sull\'elemento ' + element);
}
}
},
removeEvent: function(element, eventType, callback, useCapture) {
try { // Firefox
element.removeEventListener(eventType, callback, useCapture);
return true;
}catch (errIE) {
try {
return element.detachEvent('on'+ eventType, callback);
}catch(error){
console.log('Impossibile rimuovere l\'evento dall\'elemento ' + element);
}
}
},
preventDefault: function(event) {
event = event || window.event;
try { // InternetExplorer
event.preventDefault();
} catch (errFirefox){ // FireFox
event.returnValue = false;
}
}
};