Question

我正在尝试创建facebook风格的多个文本框编辑，但无法正常工作。

 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

 <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();
            }
        });
    });


   });

Answer 2

我更好的缩进至少显示一个问题...试试这个：

 $(".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();
        }
      });
   });

 });

注意：这仍然存在严重的问题...在每次点击时你都要添加事件处理程序......在设置它们之前需要将它们清除（至少）。或者不要在点击事件中添加处理程序。

Answer 3

我在代码中看到的一个非常明显的问题是，在div的点击处理程序中设置了inputId。您无法使用该变量来跟踪点击次数。为什么不将事件绑定到编辑类输入框？实际上，我不知道你为什么要在这段代码中跟踪那些inputIds。

Facebook风格多个配置文件使用jQuery编辑

3 个答案: