更換後重新設置使用

我正在開發一個發票系統，並且我已經進入了訂單項的一部分。更換後重新設置使用

爲此，我有一個表格，最終會有一個按鈕來動態添加另一個行項目到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

更換後重新設置使用

回答

相關問題