在replaceWith之后设置焦点

dockeryZ 发表于 Dev

码头

我正在开发一个发票系统，现在进入了订单项。

为此，我有一个表，该表最终将有一个按钮，用于向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的值来进入隐藏的输入字段...我在做什么错？

马格努斯·恩格达尔

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

像这样：

在这里演示

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。