Ciao a tutti!
Ho scritto un semplice script che dovrebbe fare:
1 Se 'click' sull'elemento editalo (appare un form)
2 Quindi non osservare più l'elemento
3 Quando viene premuto il bottone "salva" modifica l'elemento
4 Ri-osserva l'elemento, se viene premuto vai al passo 1, altrimenti non fare nulla
(il passo 2 perchè altrimenti cliccando anche su "input type text" viene eseguito il passo 3)
Il mio problema è che al passo 4 "altrimenti non fare nulla" non viene eseguito, ma ritorna sempre al
passo 1.. ??
ecco il passo 4:
element.observe('click', this._edit.bind(this, element));
Non aspetta il click!!! perchè?
ecco il breve codice: (ho messo un alert, per essere più chiaro...)
codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="./js/prototype.js"></script>
<script type="text/javascript">
var edita = Class.create();
edita.prototype = {
initialize : function (element) {
element.observe('click', this._edit.bind(this, element));
},
_edit : function(element) {
element.stopObserving('click');
var form = new Element('form');
form.name = "edit";
var input = new Element('input');
input.type = 'text';
input.value = element.textContent;
var b = new Element('button');
b.innerHTML = "salva";
b.observe('click', this._salva.bind(this, element));
element.update();
element.insert(form);
form.insert(input);
form.insert(b);
},
_salva : function(element) {
var content = element.down('input').value;
element.down('form').remove();
element.update();
element.innerHTML = content;
alert("FIN QUI OK! MA ADESSO... NON ASPETTA L'EVENTO CLICK:");
element.observe('click', this._edit.bind(this, element));
}
};
var a = function () {
var es = new edita($("aaa"));
}
document.observe("dom:loaded", a);
</script>
</head>
<body>
<div id="aaa">CLICCAMI</div>
</body>
</html>