Изменение jquery .on не запускается
Следующий код у меня не работает, хотя похожий работает (http://85.255.14.137). Текст CHANGE_ME должен заменяться значением a при каждом изменении поля ввода. Как я могу это исправить?
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<script>
$(document).on('change', '.input', (function(){
var par = $(this);
var val = $(this).val();
par.find("span.value").hmtl(val));
});
</script>
</head>
<body>
<div class = "col-sm-4">
<div>
<form id = "A" name = "do_something" method = "POST" action = "/do_something">
<p>
<input id = "A" class = "input" type = "number" min = "5" value = "5" step = "1" required />
</p><p>
<span class = "value">CHANGE_ME</span>
</p>
</form>
</div>
</div>
</body>
</html>Ваш код синтаксически неверен.
par.find("span.value") ват? par - это вход, он не может содержать промежуток.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Есть несколько проблем с вашим кодом. С одной стороны, вы неправильно написали html, другая проблема заключается в том, что вы ищете span с классом valueв и input, но его нет на входе. Вместо этого вы можете написать это так:
$('.input').change(function() {
var val = $(this).val();
$("span.value").html(val);
});<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "col-sm-4">
<div>
<form id = "A" name = "do_something" method = "POST" action = "/do_something">
<p>
<input id = "A" class = "input" type = "number" min = "5" value = "5" step = "1" required />
</p><p>
<span class = "value">CHANGE_ME</span>
</p>
</form>
</div>
</div>Другая проблема, не связанная с этой проблемой, заключается в том, что у вас есть два элемента с ID из A, что недопустимо. ID должны быть уникальными.
Помимо hmtl опечатка. Вы проходите / ищете span с классом value, используя метод .find. К сожалению, этого там нет.
Вместо обхода вы можете получить прямой доступ к span с помощью $(".value").html(val);.
Во-первых: как сказал Taplar, ваш предоставленный код имеет дополнительный ) после вызова метода .html(). Как сказал APAD1, у вас также не должно быть двух элементов с одинаковым идентификатором, но это не вызывает вашей проблемы.
Во-вторых: эта проблема - прекрасная возможность хорошенько подумать о структуре DOM. В нынешнем виде вы не можете find() из $(this), потому что $(this) - это элемент ввода, который вызвал событие change. У входа нет дочерних элементов, поэтому .find() никогда ничего не вернет. Поскольку ваш ввод находится внутри тега абзаца, а ваш целевой диапазон находится в абзаце, который является братом этого родителя, вам нужно выполнить несколько сложных обходов вверх, вверх и вниз, например:
$(document).on('change', '.input', function() {
var par = $(this);
var val = $(this).val();
par.closest('p').siblings('p').find('span.value').text(val);
});<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class = "col-sm-4">
<div>
<form id = "A" name = "do_something" method = "POST" action = "/do_something">
<p>
<input id = "B" class = "input" type = "number" min = "5" value = "5" step = "1" required />
</p>
<p>
<span class = "value">CHANGE_ME</span>
</p>
</form>
</div>
</div>
</body>
</html>Мы можем избежать этой проблемы, если подойдем к нашей структуре DOM более осмысленно и немного иначе подумаем о том, как мы обрабатываем событие изменения.
Во-первых, давайте используем больше семантических тегов в нашей форме. Входам нужны метки; а также имейте в виду, что выходной элемент - лучший тег для отображения содержимого, полученного при использовании ввода:
<form id = "A" name = "do_something" method = "POST" action = "/do_something">
<label for = "B">Pick a number</label>
<input id = "B" class = "input" type = "number" min = "5" value = "5" step = "1" required />
<output for = "B">CHANGE_ME</output>
</form>
С такой структурой обход DOM намного проще!
$(document).on('change', 'form', function(e) {
// the form whose input fired `change`
const $self = $(e.currentTarget);
const $output = $self.find('output');
const val = $self.find('input').val();
$output.text(val);
(Обратите внимание, что мы используем не используйте this для ссылки на элемент формы. this может быть неясным, и у нас есть лучшие способы ссылки на элемент, с которым взаимодействует jQuery, например, event.currentTarget или event.target. Это два слегка другой!)
А вот фрагмент с этими изменениями вместе, для ленивых: :)
$(document).on('change', 'form', function(e) {
// the form whose input fired `change`
const $self = $(e.currentTarget);
const $output = $self.find('output');
const val = $self.find('input').val();
$output.text(val);
});* {
box-sizing: border-box;
}
output {
display: block;
}<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class = "col-sm-4">
<div>
<form id = "A" name = "do_something" method = "POST" action = "/do_something">
<label for = "B">Pick a number</label>
<input id = "B" class = "input" type = "number" min = "5" value = "5" step = "1" required />
<output for = "B">CHANGE_ME</output>
</form>
</div>
</div>
</body>
</html>Woohoo! Спасибо товарищу не только за рабочий пример, но и за исчерпывающие объяснения. Ты сделал мой день, приятель! Большое спасибо!
Пожалуйста! Спасибо за комментарий - я увидел возможность немного лучше объяснить себя.
hmtl(val)опечатка. Вы должны были увидеть сообщение об этом в консоли своего браузера. И ваша функция обработчика событий имеет перед собой случайный(