单击“编辑”链接时显示输入字段而不是文本

Question

我正在创建后端。我需要的是一些jQuery插入一些不同的表单域。我可以举例来说有这样的代码：

<div> 
    <div> 
     Name 
    </div> 
    <div> 
     Type 
    </div> 
    <div> 
     <a class="edit" href="#">Edit</a> 
    </div> 
</div> 

此代码需要得到转换，以名称和类型文本insted的两个输入字段的值，当我点击a.edit

编辑：

我试过这段代码 - 但是当我点击“a.ff-save”时它不会提示？我的问题是什么？

<script type="text/javascript"> 
$(document).ready(function() { 
    var this_form_id = $("input#form_id").val(); 
    $("#formfield-list div.formfield-ff:odd").css('background', '#f6f6f6'); 


    $("a.ff_add").click(function() { 
     var name_val = $("input#new_field_name").val(); 
     var type_val = $("input#new_field_type").val(); 
     var demand_val = $("input#new_field_demand").val(); 
     $.ajax({ 
      type: "POST", 
      url: "{pref_folder}/admix/forms/addFormField", 
      data: ({ form_id: this_form_id, field_name: name_val, field_type: type_val, field_demand: demand_val }), 
      success: function(text) { 

       $.ajax({ 
        type: "post", 
        url: "{pref_folder}/admix/forms/getFormFields", 
        data: { form_id: this_form_id }, 
        success: function(t) { 
         $("#formfield-list").empty().append(t); 
         $("#formfield-list div.formfield-ff:odd").css('background', '#f6f6f6'); 
        }, 
        dataType: "html" 
       }); 


       $(".add-succes-message").empty().append('<div class="msg">'+text+'</div>'); 
       $(".add-field-row").slideUp(500, function(){ 
        $(".add-field-row").slideDown(500); 
       }).delay(3500); 
       $(".add-succes-message").slideDown(500, function(){ 
        $(".add-succes-message").slideUp(500); 
       }).delay(3500); 

      }, 
      cache: false, 
      async: false, 
      dataType: "html" 
     }); 
    }); 

    $("a.ff-save").click(function(){ 
     alert("ok"); 
    }); 

    $("a.ff-edit").click(function(){ 
     var fid = $(this).prev().val(); 

     var nameValue = $("#ff-"+fid+" div.ff-name").html().trim(); 
     var typeValue = $("#ff-"+fid+" div.ff-type").html().trim(); 
     var demandValue = $("#ff-"+fid+" div.ff-demand").html().trim(); 
     var typeInt; 

     if(typeValue == "Tekstfelt, 1 linje") 
     { 
      typeInt = 1; 
     } else { 
      typeInt = 0; 
     } 


     $("#ff-"+fid+" div.ff-name").html('<input type="text" name="name" class="jq-input" value="'+nameValue+'" />'); 
     $("#ff-"+fid+" div.ff-type").html('<input type="text" name="type" class="jq-input" value="'+typeInt+'" />'); 
     if(demandValue == "Ja") 
     { 
      $("#ff-"+fid+" div.ff-demand").html('<input type="checkbox" name="demand" class="jq-input" value="" checked="checked" />'); 
     } else { 
      $("#ff-"+fid+" div.ff-demand").html('<input type="checkbox" name="demand" class="jq-input" value="" />'); 
     } 

     $("#ff-"+fid+" .ff-edit, #ff-"+fid+".ff-delete").hide(); 
     $("#ff-"+fid+" div:last").html('<a href="#" class="ff-save">Save</a>'); 
    }); 

    $("a.ff-delete").click(); 
}); 
</script> 

Answer 1

检查此jQuery插件。它确切地做你正在寻找的东西。

JEditable

如果没有对使用插件倾斜，然后尝试下面的代码：

<div> 
    <div> 
     <label class="editable">Name</label> 
     <input class="editable" type="text" name="name" style="display:none"/> 
    </div> 
    <div> 
     <label class="editable">Type</label> 
     <input class="editable" type="text" name="type" style="display:none"/> 
    </div> 
    <div> 
     <a class="edit" href="#">Edit</a> 
    </div> 
</div> 
<script type="text/javascript"> 
    $(function(){ 
     $(".edit").click(function(){ 
      var $this = $(this); 
      var text = $this.text(); 
      if(text=="Edit"){ 
       $this.text("Cancel"); 
      } 
         else{ 
          $this.text("Edit"); 
         } 
      $(".editable").toggle(); 
     }); 

     $("input.editable").change(function(){ 
      $(this).prev().text($(this).text()); 

     }); 
    }); 
</script> 

编辑：

要绑定点击事件处理到锚点元素使用jQuery的生活功能。 如：

$("a.ff-save").live("click", function(){   
alert("ok");  
}); 

Answer 2

我做的工作是这样的，这里是我的解决方案：

HTML

<div id='container'> 
    <div id='name' class='text'> 
     Name 
    </div> 
    <div id='type' class='text'> 
     Type 
    </div> 
    <div> 
     <a class="edit" href="#">Edit</a> 
    </div> 
</div> 

JQuery的

function StartEditState() { 
    var container = $('#container'); 
    container.find('a.edit').unbind('click').click(SaveEditState).html('Save'); //this changes edit button save button 
    container.find('div.text').each(function() { 
     $(this).html('<input class="new_val" type="text" value="' + $(this).html() + '" /><input class="orig_val" type="hidden" value="' + $(this).html() + '" />'); // this creates a hidden with the old value and an input that they can change 
    }); 
    return false; 
} 

要保存VAL UE的，你只需要做到这一点$('#name input.new_val').val()（对于名称，使用#type类型）或返回到原始值使用$('#name input.orig_val').val()

希望你喜欢它。

Answer 3

我尝试了几种不同的方法，这就是我想出了：

HTML：

<span class="subject"> 
    <span class="text"> subject </span> 
    <input class="input" type="text" name="subject" val="subject" hidden/> 
</span> 

的Jquery：

function showInput(){ 
    $(this).off('click'); 
    $(this).siblings('input').each(function(){$(this).show();}); 
    $(this).siblings('input').focus(); 
    $(this).hide(); 
} 
function hideInput(){ 
    $(this).hide(); 
    $(this).siblings('span').show(); 
    $(this).siblings('span').click(showInput); 
} 
$(function(){ 
    $('.text').click(showInput); 
    $('.input').blur(hideInput); 
} 

当你点击给定的文本简而言之它会变成一个输入框，当输入框丢失焦点时，它会变回正常文本。

我还使显示/隐藏功能分开可调用函数，所以我可以重置hideInput函数内的点击监听器。