2

我正在尝试将 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 错误。

谢谢你

4

2 回答 2

0

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

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

演示

于 2013-06-25T17:34:14.453 回答
0

你的代码有几个问题：你没有关闭你的 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)
   })
});

工作演示

于 2013-06-25T17:40:11.503 回答