Добавление текста из текстового поля в список ul в

Question

Недавно я начал работать над проектом, в этом я должен добавить текст, введенный пользователем в текстовое поле, в список 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, что вам следует избегать использования onclick в вашем html.

<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.

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

<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>

Answer 6

Вопрос здесь заключается в том, что первый раз, когда пользователь нажимает кнопку, вы регистрируете дополнительные обратного вызова мыши. Вместо этого вы можете выполнить всю свою работу над существующим обратным вызовом, который вы создали: addNames.

В настоящее время происходит то, что происходит.

1. Пользователь нажимает на #sendButton
2. Функция addNames называется.
3. addNames собирается зарегистрировать событие click на #sendButton (это бесполезно, так как функция addNames уже является функцией, которая вызывается onclick! Также нет необходимости использовать $ (document) .ready, так как к этому времени DOM гарантированно уже готов.).
4. Элемент не добавлен, потому что эта функция еще не активирована (помните, что все, что вы делали на предыдущем шаге, регистрировало событие).
5. В следующий раз, когда пользователь нажимает, будет вызываться addNames, и ваш зарегистрированный обратный вызов.

Вот код, который будет работать для вас:

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