Когда событие клика, элемент добавляется и сразу исчезает - PullRequest
Новая
       0

Когда событие клика, элемент добавляется и сразу исчезает

0 голосов
/ 28 апреля 2020 
<!DOCTYPE html>

<html>
<head>
    <title>Question</title>
    <meta charset="utf-8">  
</head>
<body>
    <form action="">
        <input type="text" id="more-item" placeholder="addSomething" required autocomplete="off">
        <button id="more">add</button>
    </form>
    <ul id="items">
        <li class="item">work</li>
        <li class="item">relax</li>
        <li class="item">game</li>
    </ul>
</body>
</html>


$('#more').on('click', function() {
const item = $('#more-item').val();
  if (item !== '') {
    $('#items').append('<li class="item">' + String(item) + '</li>');
  } 
});

https://jsfiddle.net/mj70Lzey/

Когда я добавляю тег li, он добавляется и сразу исчезает с экрана, что приводит к ошибке 404. В чем причина?

Ответы [ 3 ]

1 голос
/ 28 апреля 2020

Поскольку кнопка типа по умолчанию - submit, когда вы нажимаете кнопку в форме, ваш action="" перезагружает страницу.

Изменение типа кнопки на кнопку решит вашу проблему <button id="more" type="button">add</button>

JSFiddle

https://jsfiddle.net/viethien/08eq1pwv/1/

$('#more').on('click', function() {
const item = $('#more-item').val();
  if (item !== '') {
    $('#items').append('<li class="item">' + String(item) + '</li>');
  } 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
	<title>Question</title>
	<meta charset="utf-8">	
</head>
<body>
	<form action="">
		<input type="text" id="more-item" placeholder="addSomething" required autocomplete="off">
		<button id="more" type="button">add</button>
	</form>

	<ul id="items">
		<li class="item">work</li>
		<li class="item">relax</li>
		<li class="item">game</li>
	</ul>

</body>
</html>
0 голосов
/ 28 апреля 2020

Добавить запретить по умолчанию. Кнопка отправляет форму и обновляет страницу.

https://jsfiddle.net/35oabq20/

$('#more').on('click', function(e) {
e.preventDefault();

const item = $('#more-item').val();
  if (item !== '') {
    $('#items').append('<li class="item">' + String(item) + '</li>');
  } 
});
0 голосов
/ 28 апреля 2020

Вы отправляете свою форму и страница обновляется. Типом элемента кнопки по умолчанию является submit. Просто измените его на кнопку: 

<button id="more" type="button">add</button>


$('#more').on('click', function() {
  const item = $('#more-item').val();
  if (item !== '') {
    $('#items').append('<li class="item">' + String(item) + '</li>');
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="">
  <input type="text" id="more-item" placeholder="addSomething" required autocomplete="off">
  <button type="button" id="more">add</button>
</form>

<ul id="items">
  <li class="item">work</li>
  <li class="item">relax</li>
  <li class="item">game</li>
</ul>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...