javascript 如何使用jquery检测div子内容何时更改
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10910210/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to detect when div children content changed using jquery
提问by Aruna
I have some code like the following:
我有一些像下面这样的代码：
<html>
<body>
<div id="product_descriptioncontent">
<input type="text" id="a" />
<textarea id="b" />
</div>
</body>
<html>
That means, my div contains either inputs, text areas or images. But my question is how to detect the changes when any children value changed in a div?
这意味着，我的 div 包含输入、文本区域或图像。但我的问题是如何在 div 中的任何子值更改时检测更改？
回答by thecodeparadox
You can do something like this:
你可以这样做：
$('#a, #b').on('change', function() {
$('#product_descriptioncontent').css('border', '1px solid green')
});
回答by Fabrício Matté
The onchangeevent only fires when the element loses focus, that is, when it blurs with a different valuethan when it gained focus.
该onchange事件仅在元素失去焦点时触发，也就是说，当它的blurs 与value它获得时不同focus。
I'm not aware of any native listener that would provide such functionality in real time, but you could try maneuvering jQuery's .data()method to store the current value and check against it in a standard keyboard event, such as keyup:
我不知道有任何可以实时提供此类功能的本机侦听器，但是您可以尝试使用 jQuery 的.data()方法来存储当前值并在标准键盘事件中对其进行检查，例如keyup：
$('#product_descriptioncontent').children().each(function() {
$(this).on('keyup', function() {
if ($(this).data('c_val') != $(this).val()) {
alert('value changed!');
//do other stuff
}
$(this).data('c_val', $(this).val());
}).data('c_val', $(this).val());
});??
Note that you may also remap the keyupto multiple events for extra checks:
请注意，您还可以将 重新映射keyup到多个事件以进行额外检查：
$(this).on('keyup mouseup blur', function(){
As well as simply calling $('#element').keyup()will trigger the onfunction for that element, if you ever need to call it without the user inputting anything. =]
如果您需要在没有用户输入任何内容的情况下调用它，那么简单地调用$('#element').keyup()将触发该on元素的函数。=]
Note that the .on()jQuery method is only supported in jQuery 1.7+, for older versions you should use .live().
回答by decider
You can also do it by binding the HTML5 inputevent for the children elements. That doesn't work for IE versions less than 9, but, in these cases, you can use the propertychangeevent. The below code does both and because IE9 can handle both, we unbind the propertychangeevent in the case of IE9 since better to use the standard inputevent.
您也可以通过input为子元素绑定 HTML5事件来实现。这不适用于 IE 版本低于 9，但在这些情况下，您可以使用该propertychange事件。下面的代码可以同时处理这两种情况，因为 IE9 可以处理这两种情况，所以我们propertychange在 IE9 的情况下取消绑定事件，因为最好使用标准input事件。
$(document).ready(function() {
var propertyChangeUnbound = false;
$("#product_descriptioncontent").children().bind("propertychange", function(e) {
if (e.originalEvent.propertyName == "value") {
alert("Value changed!");
//do other stuff
}
});
$("#product_descriptioncontent").children().bind("input", function() {
if (!propertyChangeUnbound) {
$("#product_descriptioncontent").unbind("propertychange");
propertyChangeUnbound = true;
}
alert("Value changed!");
//do other stuff
});
});
Here is a jsfiddle link: http://jsfiddle.net/yNxaW/
这是一个 jsfiddle 链接：http: //jsfiddle.net/yNxaW/
This is, in part, based on the answer to another stackoverflow question: Catch only keypresses that change input?
这部分基于对另一个 stackoverflow 问题的回答：仅捕获更改输入的按键？
回答by corazza
You can add an onchangeevent listener.
您可以添加onchange事件侦听器。
<html>
<body>
<div id="product_descriptioncontent">
<input onchange="somefunction(this)" type="text" id="a" />
<textarea onchange="somefunction(this)" id="b" />
</div>
</body>
<html>
