SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    May 2008
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery: Edit on place

    I have a jQuery code to edit a string, on-fly Demo: http://progra.ro/ursi/index.html

    The code work pretty good, but I don't understand why jQuery lost the event listener after "string" is changed (updated). Please do this:

    1. Open the demo page.
    2. Click on "My name here" and change the text. Press TAB
    3. Now click again on text, jQuery lost the click event handler

    This is my code:
    Code JavaScript:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="jquery.js"></script>
    <title>Untitled Document</title>
    <script type="text/javascript">
     
      $(document).ready(function() {
      $('.username').click(function() {
        var editBox = '<input type="text" value="' + $(this).html() + '" />';
        $(this).after(editBox).remove();
        $('input').focus();
     
        $('input').blur(function() {
          var edited = '<span class="username">' + $('input')[0].value; + '</span>';
          $(this).after(edited).remove();
        }); 
      });
    });
     
    </script>
    </head>
    <body>
      <p>Click on "My name here"</p>
      Name: <span class="username">My name here</span>
     
    </body>
    </html>

    Any idea how to solve this problem ? Thanks!

  2. #2
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This happens because you overwrites the current content of the <span class="username">...</span> with the new content. It of course contains <span class="username">...</span> but browsers consider this element as new element but your onclick is bound to old element which was removed by $(this).after(editBox).remove();
    Instead of remove try to use html(''); which should only replace the content, not remove element.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="jquery.js"></script>
    <title>Untitled Document</title>
    <script type="text/javascript">
      
    $(document).ready(function() {
      $('.username').click(function() {
        var username = $(this);
        var editBox = $('<input type="text" value="' + $(this).html() + '" />').blur(function() {
          username.html(this.value);
          editBox.remove();
        })
        username.after(editBox).html('');
        editBox.focus();
      });
    });
      
    </script>
    </head>
    <body>
      <p>Click on "My name here"</p>
      Name: <span class="username">My name here</span>
     
    </body>
    </html>
    I'm creating trouble-free Apache, PHP, MySQL installer, WITSuite,
    and use it to setup my development environment.
    Demo, support, contact. Questions?

  3. #3
    SitePoint Zealot
    Join Date
    May 2008
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for your time and answer I use this code and work :

    Code JavaScript:
    $(document).ready(function() {
      $('.username').click(function() {
        var editBox = '<input type="text" value="' + $(this).html() + '" />';
        $(this).after(editBox).hide();
        $('input').focus();
     
        $('input').blur(function() {
          var inputVal = $(this)[0].value;
          $(this).remove();
     
          $('.username').html(inputVal).show();
        });
      });
    });

    I have a question again. Is possible to run this code on two event: .blur and .keypress ? :

    Code JavaScript:
    var inputVal = $(this)[0].value;
    $(this).remove();
     
    $('.username').html(inputVal).show();

    Which is the best way to solve this problem ? I need something like ? :
    Code JavaScript:
    $('input').blur(function() {
       // call a function
    });
     
    $('input').keypress(function() {
       // call a function
    });

    Or exist a better way ? Thanks!

  4. #4
    SitePoint Addict chestertondevelopment's Avatar
    Join Date
    Dec 2005
    Location
    Essex, UK
    Posts
    241
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do the following:
    Code JavaScript:
    var editInPlace = function() {
      // do the editing in place here
    }
     
    $('input').blur(editInPlace);
    $('input').keypress(editInPlace);


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •