Элемент, добавленный через jquery append, не сохраняется на экране

Я пытаюсь сделать в список дел. Прилагаю список элементов в список задач с помощью append() функцииЭлемент, добавленный через jquery append, не сохраняется на экране

HTML

<!DOCTYPE HTML> 
<html> 
    <title>ToDo</title> 

    <head> 
    <meta charset="UTF-8"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script type="text/javascript" src="script.js"></script> 

    <h2>TO DO LIST</h2> 
    </head> 

    <form name = "taskForm"> 
    Task: <input type = "text" name = "task" > 
      <input type = "submit" id = "submit" value = "ADD"> 
    </form> 

    <ul class = "list"> 
    <li class = "item"></li> 
    </ul> 

</html>

SCRIPT

$(document).ready(function(){ 
    $('input#submit').click(function(){ 
     var newTask = $('input[name=task]').val(); 
     $('.list').append('<li class = "item"' + newTask + '</li>'); 
    }); 
});

При нажатии на кнопку Submit, я вижу новую вспышку элемента на экране в течение второй, а затем исчезнуть сам по себе.

Почему я наблюдаю за этим поведением?

источник

2015-07-02 Sinstein

Поскольку страница перезагружается, когда вы отправляете форму – trebor

Это потому, что вы отправляете форму. Когда форма отправляется, страница автоматически начинает перенаправлять.

Чтобы сохранить поведение, return false предотвратить форму от их представления

$(document).ready(function(){ 
    $('input#submit').click(function(){ 
     var newTask = $('input[name=task]').val(); 
     $('.list').append('<li class = "item"' + newTask + '</li>'); 
     return false; 
    }); 
});

Заметим, что это именно так, вы можете наблюдать изменения сохраняются. Однако, в зависимости от ваших потребностей, вам может потребоваться изменить ваш поток, если вы хотите отправить форму, но сохраните прилагаемые изменения. Это можно сделать с отправкой $.ajax().

источник

2015-07-02 07:09:57 AmmarCSE

При нажатии кнопки отправки страница снова загружается.

изменение

<input type = "submit" id = "submit" value = "ADD">

<input type = "button" id = "submit" value = "ADD">

источник

2015-07-02 07:14:19

здесь является исполняемым пример, с некоторыми ошибками фиксируется в коде:

HTML:

<form name = "taskForm"> 
    Task: <input type = "text" name = "task" > 
     <input type = "button" id = "submit" value = "ADD"> 
</form> 

<ul class = "list"> 
    <li class = "item"></li> 
</ul>

ЯШ:

$(document).ready(function(){ 
    $('input#submit').click(function(){ 
    var newTask = $($('input[name="task"]')[0]).val(); 
    console.log(newTask) 
    $('.list').append('<li class = "item">' + newTask + '</li>'); 
    }); 
});

источник

2015-07-02 07:17:27 Yangguang

Какие преимущества '$ ($ ('вход [имя = "задачи"]') [0]). Val()' имеют над '$ (» input [name = task] '). val() '? – Sinstein

@Sinstein $ ('input [name = "task"]') получает массив элементов с именем «task». – Yangguang

Элемент, добавленный через jquery append, не сохраняется на экране

ответ

Смежные вопросы