Question

是否可以单击列表中的文本以添加到文本框中。我制作了一个JSON api，它获取了数据库中的人员列表。然后我有一个包含文本字段的表单并显示人员列表。我想点击某个人并将其添加到文本框中。

main.js

    var ajax_call = function() {
      var $people = $('#people');

      $.ajax({
          type: 'GET',
          url: '/all/api',
          success: function(people) {
            $.each(people, function(i, person) {
                $people.empty()
            });
            $.each(people, function(i, person) {
              $people.append('<li>name: ' + person.first_name+', last: '+ person.last_name + '</li>');
            });
          }
        });
      $("#people").on("click", "li", function() {
          var content = $(this).html();
         //$("#testbox").val(content);  //replace existing name in textbox
        $("#testbox").val($("#testbox").val() + content + "\n");  //add new name to textbox
});

    };
    var interval = 800;
    setInterval(ajax_call, interval);

form.html

<form id="textbox" action="" method="post">{% csrf_token %}
            {{ form.as_p }}
            <input type="submit" value="create" />
        </form>

    <ul id="people"></ul>

Answer 1

我认为你的问题的答案很简单。在您的代码中，您有

行

$("#people").keyup(function() {

这可能不是您想要做的，因为现在您正在等待列表上的键盘（释放键）事件。首先，您的问题表明您希望用户点击而不是按一个按钮，然后您希望列表项不是列表本身。

所以IMO你必须改变那个部分：

$("li","#people").click(function(){
  var content = this.html();
  $("#testbox").val(content);
});

Answer 2

尝试附加到ul的“click”功能，但由li过滤（这允许列表保持动态），它允许您添加单个名称（两个版本覆盖现有的文本字段信息，第二个附加到：） DEMO

$("#people").on("click", "li", function() {
    var content = $(this).html();
    //$("#testbox").val(content);  //replace existing name in textbox
    $("#testbox").val($("#testbox").val() + content + "\n");  //add new name to textbox
});

Answer 3

试试这个：

替换此

$("#people").keyup(function() {
        var content = $('#people').html();
        $("#testbox").val(content);
    });

用这个

$("#people").click(function() {
        var content = $('#people').html();
        $("#testbox").val(content);
    });

Answer 4

如果我马上理解你的问题那么

$("#people").click(function(){
    var content = $('#people').html();
    $("#testbox").val(content);
});

应该做的工作。但我认为你应该使用自定义属性而不是id，因为特定标签只能有一个id。

JQuery如何单击html元素复制到文本区域？

4 个答案: