jquery - 在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标签的默认内容是单击此处添加注释。单击后，它会变成一个文本区域，其中包含隐藏字段中的所有内容。它也应该专注于这个新创建的文本区域......它没有聚焦!

除此之外。我似乎无法获取文本区域的值以进入隐藏的输入字段...我做错了什么？

Answer 1

选择器.closest('input:hidden')只会选择它最接近的父级，而不是兄弟级。您必须使用 .siblings('input:hidden') 或 .closest('div').find('input:hidden') 来选择输入和文本区域.

类似这样的事情:

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