ugrás a tartalomhoz

Jquery: Edit on place

zoliky · 2008. Szep. 10. (Sze), 16.30
Van egy jQuery kod amely lehetove teszi, hogy egy szoveget modositsak amikor raklikelek. A kovetkezot csinaltam. A weben talaltam egy demot: http://iamntz.com/wdb/EIP/pasul2.html

Az en kodom is mukodik, csak sajnos masodjara nem tudom hasznalni. Szoval modositom a szoveget azutan mar nem valaszol a $('.username').click(function()

Itt a HTML kodom:
  1. <body>  
  2.   Username: <span class="username">Author Name</span>  
  3. </body>  
es a jQuery:
  1. $(document).ready(function() {  
  2.   $('.username').click(function() {  
  3.     var editBox = '<input type="text" value="' + $(this).html() + '" />';  
  4.     $(this).after(editBox).remove();  
  5.     $('input').focus();  
  6.       
  7.     $('input').blur(function() {  
  8.       var edited = '<span class="username">' + $('input')[0].value; + '</span>';  
  9.       $(this).after(edited).remove();  
  10.     });  
  11.   });  
  12. });  
Hogyan lehetne megcsinalni, hogy tobbszor tudjam editalni a szoveget ? Mindig ervenyes legyen a Click event.
‹ SELECT, több mező kiválasztása java script navigáció fájllista alapján ›
 ■
1

Nyilván nem működik...

tgr · 2008. Szep. 10. (Sze), 18.54
...mert kitörlöd az elemet, amire az eseménykezelőt tetted.

remove() helyett próbálj hide()-ot, az értéket pedig a már létező spanba írd bele pl. innerHTML-lel.
2

ok

zoliky · 2008. Szep. 10. (Sze), 19.16
Erdekes, mert ugyanolyan SPAN tagot hozok letre a vegen. De valoszinuleg jQuery eszleli a torlest.
Kiprobalom az innerHTML megoldast.
3

Ugyanolyan?

Poetro · 2008. Szep. 10. (Sze), 20.02
Az ugyanolyan az azert távol áll tőle, ugyanis nem UGYANAZ, azaz vagy klónozd, vagy pedig rejtsd el. A remove törli az element a hozzáadott eseményekkel együtt, amiket nem adsz hozzá az újonnan létrehozott elemhez.
4

INPUT

zoliky · 2008. Szep. 10. (Sze), 20.22
Ok de az input mezot torolhetem, ugye ? csak akkor van ra szukseg amikor modositom a szoveget.
7

Ha van rajta eseménykezelő

tolmi · 2008. Szep. 11. (Cs), 09.46
...akkor nem törölheted.
5

Sőt .clone(true);

Ustak · 2008. Szep. 10. (Sze), 20.54
imígyen fogja az eseménykezelőket is klónozni.
6

Ok, mukodik

zoliky · 2008. Szep. 11. (Cs), 00.53
A kovetkezo kodot irtam:
  1. $(document).ready(function() {  
  2.   $('.username').click(function() {  
  3.     var editBox = '<input type="text" value="' + $(this).html() + '" />';  
  4.     $(this).after(editBox).hide();  
  5.     $('input').focus();  
  6.       
  7.     $('input').blur(function() {  
  8.        var inputVal = $(this)[0].value;  
  9.        $(this).remove();  
  10.         
  11.        $('.username').html(inputVal).show();  
  12.     });  
  13.   });  
  14. });  
Most mukodik szepen, de van egy kerdesem.
Ha szeretnem lementeni az adatot modositas utan (amikor a .blur bekapcsolodik) el kell kuldenem az adatot egy PHP szkriptnek es az beleirja adatbazisba ? Ezt nevezik AJAX-nak ?
8

Ezt

tolmi · 2008. Szep. 11. (Cs), 09.47
Igen és igen.