Javascript 将文本框中的文本添加到中的ul列表

最近我开始做一个项目，在这个项目中，我必须将用户在文本框中输入的文本添加到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>

函数addNames（）{
$（文档）.ready（函数（）{
$（“#发送按钮”）。单击（函数（）{
var val=$（'#textbox'）.val（）；
$（'li class=“list group item”>'+val+''）。附录（'ulList'）；
});
});
}

这是我的身体标签

<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

删除它所包装的

addNames

函数。另外，删除对

html

中的

addNames

函数的引用

出于上述许多原因，您还应该注意避免在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');
     });
  });

添加

$（文档）.ready（函数（）{
$（“#发送按钮”）。单击（函数（）{
var val=$（'#textbox'）.val（）；
$（'li class=“list group item”>'+val+''）。附录（'ulList'）；
});
});

您在代码中同时使用了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>

$（文档）.ready（函数（）{
$（“#发送按钮”）。单击（函数（）{
var val=$（'#textbox'）.val（）；
$（'li class=“list group item”>'+val+''）。附录（'ulList'）；
});
});
添加

看看这个

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

$（文档）.ready（函数（）{
$（“#发送按钮”）。单击（函数（）{
var val=$（'#textbox'）.val（）；
$（'li class=“list group item”>'+val+''）。附录（'ulList'）；
});
});

替代方法（按如下方式修改您的函数）：

函数addNames（）{
var val=$（'#textbox'）.val（）；
$（'li class=“list group item”>'+val+''）。附录（'ulList'）；
}

---

onclick=addNames（）
在单击按钮时，您正在启动函数，该函数将再次触发一个单击事件。这就是为什么有多个条目

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

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


$（文档）.ready（函数（）{
$（“#发送按钮”）。单击（函数（）{
var val=$（'#textbox'）.val（）；
$（'li class=“list group item”>'+val+''）。附录（'ulList'）；
});
});

添加
这里的问题是，用户第一次单击时，您正在注册一个额外的回调。相反，您可以对创建的现有回调执行所有工作：
addNames

以下是目前正在发生的情况

用户单击#send按钮
调用函数
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');
}

函数addNames（）{
var val=$（'#textbox'）.val（）；
$（'li class=“list group item”>'+val+''）。附录（'ulList'）；
}
因为click发射了两次。不要混合使用JS和jQuery。删除你的功能，它会正常工作。它不会只发射2次，它会增长，1,2,3,4。。。。N点击次数。它将以2次火灾开始。@RajaprabhuAravindasamy，如何解决您提到的问题？@Bhagyeschaudhari的答案可以帮助您。
function addNames(){
  var val = $('#textbox').val();
  $('<li class = "list-group-item">'+val+'</li>').appendTo('#ulList');
}