Question

最近我开始研究一个项目，在这里我必须将用户在文本框中输入的文本添加到bootstrap中的ul列表中。这个脚本在我的脑子里

<script type="text/javascript">
        function addNames(){
            $( document ).ready(function() {
                $("#sendButton").click(function(){
                    var val = $('#textbox').val();
                    $('<li class = "list-group-item">'+val+'</li>').appendTo('#ulList');
                });
            });
        }
    </script>

这是我的身体标签

<input type="text" id="textbox"></input>
<button type="button" class="btn btn-lg btn-success" id="sendButton" onclick=addNames()>add</button>
<ul class="list-group" id="ulList"></ul>

我面临的问题是我必须单击add按钮两次以获得屏幕上的任何输出（仅第一次，然后脚本在一次单击时正常工作）但输出不是期望的输出。

我在文本框中获得了多个文本条目，即使只需单击一下。请帮忙。
-thanx

Answer 1

替代方式（像这样修改你的功能）：

function addNames(){
    var val = $('#textbox').val();
    $('<li class = "list-group-item">'+val+'</li>').appendTo('#ulList');
}

onclick=addNames()属性只会调用该函数

Answer 2

删除它所包含的addNames函数。另外，删除addNames中对html函数的引用。

由于许多原因here，您还应该注意，您应该避免在html中使用onclick。

<input type="text" id="textbox"></input>
<button type="button" class="btn btn-lg btn-success" id="sendButton">add</button>
<ul class="list-group" id="ulList"></ul>

  $( document ).ready(function() {
    $("#sendButton").click(function(){
     var val = $('#textbox').val();
     $('<li class = "list-group-item">'+val+'</li>').appendTo('#ulList');
     });
  });

Answer 3

您在代码中使用了jquery和javascript。它可以通过以下方式完成：

<script type="text/javascript">
            $( document ).ready(function() {
                $("#sendButton").click(function(){
                    var val = $('#textbox').val();
                    $('<li class = "list-group-item">'+val+'</li>').appendTo('#ulList');
                });
            });
    </script> 

<input type="text" id="textbox"></input>
<button type="button" class="btn btn-lg btn-success" id="sendButton">add</button>
<ul class="list-group" id="ulList"></ul>

Answer 4

检查出来

 <script type="text/javascript">
         $( document ).ready(function() {
                $("#sendButton").click(function(){
                    var val = $('#textbox').val();
                    $('<li class = "list-group-item">'+val+'</li>').appendTo('#ulList');
                });
            });
    </script>

Answer 5

问题： 在单击按钮上，您正在触发功能，再触发一次单击事件。这就是为什么有多个条目。

解决方案： 删除该函数并仅使用jQuery。

建议： 尽量避免混合使用jQuery和JS。

＆＃13;

 $( document ).ready(function() {
                $("#sendButton").click(function(){
                    var val = $('#textbox').val();
                    $('<li class = "list-group-item">'+val+'</li>').appendTo('#ulList');
                });
            });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="textbox">
<button type="button" class="btn btn-lg btn-success" id="sendButton" onclick=addNames()>add</button>
<ul class="list-group" id="ulList"></ul>

＆＃13;

Answer 6

此处的问题是，用户第一次点击时，您会在点击时注册其他回调。相反，您可以对您创建的现有回调执行所有工作：addNames。

目前正在发生的事情。

用户点击#sendButton
调用函数addNames。
addNames将在#sendButton上注册一个click事件（这是没用的，因为addNames函数已经是被调用onclick的函数！它也没有必要使用$（document）.ready，因为这次DOM保证已经准备就绪。）
未添加元素，因为尚未触发该功能（请记住，您在上一步中所做的只是注册事件）。
下次用户点击时，系统会调用addNames，您的注册回拨也会被调用。

这里有适合您的代码：

function addNames(){
  var val = $('#textbox').val();
  $('<li class = "list-group-item">'+val+'</li>').appendTo('#ulList');
}

将文本从文本框添加到ul列表中

6 个答案: