jQuery .on更改不会触发 [英] jquery .on change doesn't trigger
问题描述
尽管类似的代码可以工作，但以下代码对我不起作用( http://85.255.14.137 ) .每次输入字段更改时，CHANGE_ME文本应替换为一个值.我该如何纠正?
<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>
首先:如 Taplar 所述，您提供的代码调用.html()方法后，有一个额外的).正如 APAD1 所说，您也不应有两个具有相同ID的元素，但这不会引起问题.
第二:这个问题是仔细考虑DOM结构的绝佳机会.就目前而言，您不能从$(this)中使用find()，因为$(this)是触发change事件的输入元素.输入没有子项，因此.find()将永远不会返回任何内容.因为您的输入位于段落标记内，而目标跨度位于该父级的同级段落中，所以您必须在dom上方，上方和下方进行一些复杂的遍历，就像这样:
$(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>
The following code doesn't work for me although a similar one works (http://85.255.14.137). The CHANGE_ME text should get replaced by a a value on each change of the input field. How can I correct that?
<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>
First: as Taplar said, your supplied code has an extra ) after you call the .html() method. As APAD1 said, you also shouldn't have two elements with the same ID, but that's not causing your issue.
Second: this problem is a great opportunity to think carefully about DOM structure. As it stands, you can't find() from $(this) because $(this) is the input element that fired the change event. The input has no children, so .find() will never return anything. Because your input is inside a paragraph tag and your target span is in a paragraph that is the sibling of that parent, you have to do some complicated traversals up the dom, over, and down, like so:
$(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>
We can avoid this problem if we approach our DOM structure more meaningfully, and think a bit differently about how we handle the change event.
First, let's use more semantic tags in our form. Inputs need labels; and also keep in mind that the output element is a better tag for displaying content that comes out of using an input:
<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>
With that structure, DOM traversal is a lot easier!
$(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);
(Note that we don't use this to reference the form element. this can be unclear, and we have better ways of referencing the element jQuery is interacting with, like the event.currentTarget or the event.target. The two are subtly different!)
And here's the snippet with these changes together, for the lazy: :)
$(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>
这篇关于jQuery .on更改不会触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
