Facebook風格多個配置文件使用jQuery編輯

Question

我想創建Facebook風格多個文本框編輯，但is'nt工作。

var inputId = ''; 
var that = ''; 
var data = ''; 
$(".text_wrapper").live('click', function() { 
    that = this; 
    data=$(this).html();  
    inputId = '#'+$(this).next().attr("id"); 
    $(inputId).val(data); 
    $(inputId).show(); 
    $(that).hide(); 
    $(inputId).focus(); 
}); 

$(inputId).live("mouseover", function(e){ 
    $(inputId).hide();$(that).show(); 
}); 

$(inputId).change(function() { 
    $(inputId).hide(); 
    var boxval = $(inputId).val(); 
    var dataString = 'data='+ boxval; 
    $.ajax({ 
     type: "POST", 
     url: "test.php", 
     data: dataString, 
     cache: false, 
     success: function(html) { 
     $(that).html(boxval); 
     $(that).show(); 
     } 
    }); 
}); 

這裏去HTML提前

<div class="text_wrapper">1245</div><input id="3123" name="timeout" type="text" 
class="edit" size="20" value="" /> 

    <div class="text_wrapper">98745</div><input id="3122" name="timeout" type="text" 
class="edit" size="20" value="" /> 

謝謝..

Answer 1

我更好地縮進顯示至少一個問題...試試這個：

$(".text_wrapper").live('click', function() { 
    that = this; 
    data=$(this).html();  
    inputId = '#'+$(this).next().attr("id"); 
    $(inputId).val(data); 
    $(inputId).show(); 
    $(that).hide(); 
    $(inputId).focus(); 

    $(inputId).live("mouseover", function(e){ 
     $(inputId).hide();$(that).show(); 
    }); 

    $(inputId).change(function() { 
     $(inputId).hide(); 
     var boxval = $(inputId).val(); 
     var dataString = 'data='+ boxval; 
     $.ajax({ 
     type: "POST", 
     url: "test.php", 
     data: dataString, 
     cache: false, 
     success: function(html) { 
      $(that).html(boxval); 
      $(that).show(); 
     } 
     }); 
    }); 

}); 

注：此仍然有嚴重的問題...每當你點擊添加事件處理程序...他們需要清除，然後再設置它們p（至少）。或者不要在點擊事件中添加處理程序。

Answer 2

我在代碼中看到的一個非常明顯的問題是inputId在處理程序中設置爲單擊div。您無法使用該變量來跟蹤點擊次數。爲什麼不把事件綁定到編輯類輸入框呢？其實，我不知道爲什麼你要在這段代碼中跟蹤這些inputIds。

Answer 3

<div> 
<div class="text_wrapper">1245</div> 
<input id="3123" name="timeout" type="text" class="edit" size="20" value="" /> 
<div> 

<div> 
<div class="text_wrapper">98745</div> 
<input id="3122" name="timeout" type="text" class="edit" size="20" value="" /> 
</div> 




    jQuery(function(){ 

     //stpe 1 
     jQuery('.text_wrapper').bind('mouseover',function(e){ 
      var elm = $(e.target); 
      elm.hide();      
      elm.parents('div:first') 
      .find('input[type=text]').val(elm.html()).show()focus();    
     }); 

    //step 2 
    //you should use 'blur' here rather than 'mouseover' 
    // i have chosen mouseover as u have specified this in ur codes 
     $('.edit').live("mouseover", function(e){ 
      var elm=$(e.target); 
      elm.hide(); 
     elm.parents('div:first').find('.text_wrapper') 
     .html(elm.val()).show(); 
     }); 

    //step 3 
    // i dont think 'change' is good option, choose some other 
    $('.edit').bind('change',function (e) { 
     var elm = $(e.target); 
     elm.hide(); 
     var boxval = elm.val(); 
     var dataString = 'data=' + boxval; 
     $.ajax({ 
      type: "POST", 
      url: "test.php", 
      data: dataString, 
      cache: false, 
      success: function (html) { 
       $(that).html(boxval); 
       $(that).show(); 
      } 
     }); 
    }); 


    });