更换后重新设置使用

我正在开发一个发票系统，并且我已经进入了订单项的一部分。更换后重新设置使用

为此，我有一个表格，最终会有一个按钮来动态添加另一个行项目到DOM。

直到那时，我试图从单个订单项中解决问题。就我而言，它是笔记部分。

对于笔记的输入，我有一个P标签与一些文本和onclick该元素替换它与textarea。

<h2>line items</h2><hr> 
    <table id='lineitems'> 
     <tr> 
      <th>Order #</th> 
      <th>Style #</th> 
      <th>Item Name/Description</th> 
      <th>Quantity</th> 
      <th>Cost</th> 
     </tr> 
     <tr> 
      <td><input type='text' name='ladingnum' /></td> 
      <td><input type='text' name='invoicenum' /></td> 
      <td><input type='text' name='invoicenum' style='width:300px;'/></td> 
      <td><input type='text' name='invoicenum' /></td> 
      <td><input type='text' name='invoicenum' /></td>  
     </tr><tr><td colspan=4> 
      <div id='thenotes'> 
       <input type='hidden' class='comments' name='notes'/> 
       <textarea class='comments'></textarea> 
       <p class='edit'>[ click here to add notes ]</p> 
      </div> 
     </td></tr> 

    </table>

这是我正在使用的jQuery。

$(document).on('click', '.edit', function() { 
    var odata = $(this).closest("input:hidden").val(); 
    if(odata == undefined) odata = ''; 
    $(this).closest("textarea.comments").val(odata).focus(); 
}); 

$(document).on('focusout', '.liveedit', function() { 
     var idata = $(this).val(); 
     if(idata == '') idata = "[ click here to add notes ]"; 
     $(this).prevAll("input:hidden").val(idata); 
     $(this).replaceWith("<p class='edit'>"+idata+"</p>"); 
});

使用这个，我得到了这个效果。

页面正在加载... P标签的默认内容是点击此处添加注释。点击它会变成一个textarea，它包含隐藏字段中的任何内容。它也应该专注于这个新创建的textarea ......它不是专注于！

最重要的。我似乎无法得到textarea的价值进入隐藏的输入字段...我做错了什么？

来源

2014-02-07 dockeryZ

的选择.closest('input:hidden')将只选择它最接近的父母，兄弟姐妹不。您必须使用.siblings('input:hidden')或.closest('div').find('input:hidden')来选择输入和textarea。

事情是这样的：

演示here

$(function() { 
    $(document).on('click', '.edit', function() { 
     var odata = $(this).closest("div").find("input:hidden").val(); 
     if (odata == undefined) odata = ''; 
     $(this).closest("div").find("textarea.comments").val(odata).focus(); 
    }); 

    $(document).on('focusout', '.liveedit', function() { 
     var idata = $(this).val(); 
     if (idata == '') idata = "[ click here to add notes ]"; 
     $(this).prevAll("input:hidden").val(idata); 
     $(this).replaceWith("<p class='edit'>" + idata + "</p>"); 
    }); 
});

来源

2014-02-07 14:37:11

是！谢谢。 – dockeryZ

使用siblings代替closest。尝试这样的：

$(document).on('click', '.edit', function() { 
var odata = $(this).siblings("input[type='hidden']").val(); 
if(odata == undefined) odata = ''; 
$(this).siblings("textarea.comments").val(odata).focus(); 
});

来源

2014-02-07 14:28:30

隐藏的<input>和<p>标签是兄弟，所以你应该在siblings()选择来代替。 closest()用于遍历元素的祖先，直到找到匹配选择器。您还没有创建您的代码的任何<textarea>但我想这就是'.liveedit'是：

$(document).on('click', '.edit', function() { 
    var odata = $(this).siblings("input:hidden").val(); 
    if (odata == undefined) odata = ''; 
    var textarea = $('<textarea class="liveedit">' + odata + '</textarea>'); 
    $(this).replaceWith(textarea); 
    textarea.focus(); 
}); 

$(document).on('focusout', '.liveedit', function() { 
    var idata = $(this).val(); 
    if (idata == '') idata = "[ click here to add notes ]"; 
    $(this).siblings("input:hidden").val(idata); 
    $(this).replaceWith("<p class='edit'>" + idata + "</p>"); 
});

看到这个的jsfiddle：http://jsfiddle.net/yKym7/1/

来源

2014-02-07 15:02:18

更换后重新设置使用

回答

相关问题