JQuery - 附加到已用 Jquery 修改的文本区域答案

【问题标题】：JQuery - Append to text area that has been modified with JqueryJQuery - 附加到已用 Jquery 修改的文本区域
【发布时间】：2013-06-22 14:57:59
【问题描述】：

我正在尝试将 div 或输入框的值附加到我的文本区域。我有这个工作没有问题，但如果我首先使用 Jquery 操作清除文本区域的内容，它不允许我使用我的附加功能。

例如

<script type="text/javascript">
$(document).ready(function() {
   $("#Column1").click(function () {
        $("#sql").append($("#Column1").val())
   })

    $("#Column2").click(function () {
        $("#sql").append($("#Column2").html())
   })

  $("#reset_sql").click(function () {
        $("#sql").val('SELECT ')
   })
</script>


<div> <input type="checkbox" name="column1" id="column1" value="`Column1`"> column1 </div>
<div id="Column2"> Column2 </div>

<textarea rows="10" cols="80" name="sql" id="sql"><? echo $sql ;?></textarea>
<input type="submit" value="submit" />
<input type="button" value="reset sql" id="reset_sql" />

上面的 input 和 div 行只是通用示例，但与我正在尝试做的事情完全相关。

我不明白，当我使用 javascript 清除文本区域时，我的附加功能不起作用。我在 Firefox 错误控制台中没有 JS 错误。

谢谢你

【问题讨论】：

您尚未关闭文档准备功能。最后你错过了});。

标签： javascript jquery append

【解决方案1】：

您的复选框的 id 为“column1”，但您的事件处理程序是 $("#Column1").click(function () {。

案件很重要！将 id 更改为“Column1”或将事件处理程序更改为查找 $('#column1')。

Demo

【讨论】：

【解决方案2】：

你的代码有几个问题：你没有关闭你的 document.ready 回调，你在引用你的 ID 时使用了不正确的大小写，并且你错误地使用了一些 jQuery 方法。例如，append() 将 HTML 附加到元素，而您想要更新值。

您的逻辑也不完全正确，因为当您取消选中复选框时不会删除列，并且列不会用逗号分隔（看起来您正在此处构建 SQL 字符串）。

我相信你正在寻找这样的东西：

$(document).ready(function() {
    var $sql = $('#sql');
    var initialValue = $sql.val();

   $("#column1, #column2").on('change', function () {
       var cols = [];

       var checked = $('input[type="checkbox"]').filter(':checked').each(function() {
           cols.push($(this).val());
       });

       $sql.val(initialValue + ' ' + cols.join(', '));
   })

   $("#reset_sql").on('click', function () {
        $sql.val(initialValue)
   })
});

Working Demo

【讨论】：