将 TextField 附加到 Div JQuery答案

【问题标题】：Append TextField into Div JQuery将 TextField 附加到 Div JQuery
【发布时间】：2012-10-07 18:45:52
【问题描述】：

我有一个 ID 为“task_alignment”的字段，该字段的值是用户将要输入的值，需要添加到下面的范围中。为了下面代码中的示例，跨度的值为 12。我似乎无法正常工作。

<tr>
<td> Aligned To </td> 
<td class="task_table_item_last">
<input type='text' size='95' id='task_alignment' name='task_alignment' value='<?php echo $task_alignment; ?>'>
</td>
<td class="edit_taskicon"><img class="edit_icon_trigger" src="img/add.png"></td>
</tr>

<tr>
<td></td> 
<td class="aligncode_start">
    <span>12</span>

</td> 
</tr>

我已经尝试使用下面的代码，但它没有做任何事情：

<script>
$(document).ready(function() {
    var $aligncode_newitem = $('<span id="aligncode_newitem">'#task_alignment '</span>'),
        $('.edit_icon_trigger').click(function() {
            $("#task_alignment").clone(aligncode_newitem);
        });
});
</script>

【问题讨论】：

喜欢这个jsfiddle.net/j08691/FakH7 ?
@j08691 意外的非法令牌
@j08691 实际上这适用于小提琴.. 我想继续将新值添加到新跨度中.. 有点像添加到堆栈上的标签
我不确定您在哪里看到所有这些unexpected illegal token 错误，但它工作正常。
这就是你想要的jsfiddle.net/j08691/FakH7/1吗？

标签： jquery jquery-ui jquery-selectors append clone

【解决方案1】：

试试：

$('.edit_icon_trigger').click(doit);
$('#task_alignment').keypress(function() {
    if (event.which == 13) {
        event.preventDefault();
        doit();
    }
});
function doit() {
    $("td.aligncode_start").html($("td.aligncode_start").html() + ' <span>' + $('#task_alignment').val() + '</span>');
    $('#task_alignment').val('').focus();
}

jsFiddle example

【讨论】：

@j0861 我需要它为每次点击创建一个新的跨度...你能修复小提琴吗？
太棒了！当用户按下回车键时怎么样？ :)
这样用户可以按下按钮或点击进入

【解决方案2】：

如果我的理解对您的要求是正确的，您需要在输入文本中输入的 td 类 aligncode_start 下的 SPAN 中添加“n”数字，对吗？如果是这样，请检查以下代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="../Scripts/jQuery/jquery-1.7.2.js"></script>
<script type="text/ecmascript">
    $(document).ready(function () {
        $(".edit_icon_trigger").live("click", function () {
            $(".aligncode_start").append("<span>" + ($("#task_alignment").val()) + "</span>");
        });
    });
</script>

<div>
    <table>
        <tr>
            <td>Aligned To </td>
            <td class="task_table_item_last">
                <input type='text' size='95' id='task_alignment' name='task_alignment'>
            </td>
            <td class="edit_taskicon">
                <img class="edit_icon_trigger" src="img/add.png"></td>
        </tr>

        <tr>
            <td></td>
            <td class="aligncode_start">
                <span>12</span>

            </td>
        </tr>

    </table>
</div>
</form>

【讨论】：

从 jQuery 1.7 开始，.live() 被弃用，取而代之的是 .on()。
@j08691，感谢您的更新。我是 1.4 用户，正在更新 :)
@achuthakrishnan 我正在尝试为每次点击添加一个新的跨度。你能解决吗？
@greycode，我给出的代码也是如此。 append("") 确实会在每次点击时创建一个新的跨度。你的意思是说你每次都想要新的带有 id 的 span？

【解决方案3】：

要在 span 中显示输入值，可以这样做

$('.edit_icon_trigger').on('click',function(){
  var value = $('input#task_alignment').val();
  $('.aligncode_start span').html(value);
});

你可以在这个 jsfiddle 中测试

http://jsfiddle.net/xBFKU/

【讨论】：

我收到了意外的非法令牌
该错误可能与其他问题有关，应该没有任何问题。
我需要它为每次点击创建一个新的跨度...你能修复小提琴吗？