set focus after replaceWith

Question

Я работаю над системой счетов, и я пришел к части позиций.

Для этого у меня есть таблица, в конце которой у вас будет кнопка для динамического добавления другой позиции в DOM.

До этого момента я пытаюсь выполнить изгибы из одной позиции. В моем случае это раздел примечаний.

Для ввода заметок у меня есть тег P с некоторым текстом, а onclick этого элемента заменяет его текстовым полем.

<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 войти в скрытое поле ввода ... Что я делаю неправильно?

Answer 1

Селектор .closest('input:hidden') будет только выбрать его ближайший родитель, не братья. Вы должны использовать .siblings('input:hidden') или .closest('div').find('input:hidden'), чтобы выбрать входные и текстовые поля.

Что-то вроде этого:

Demo 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>"); 
    }); 
}); 

Answer 2

использование siblings вместо closest .Try это:

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

Answer 3

Скрытое <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/