如何使用jQuery检测div子级内容何时更改
[英]How to detect when div children content changed using jquery
问题描述
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. 这意味着，我的div包含输入，文本区域或图像。 But my question is how to detect the changes when any children value changed in a div? 但是我的问题是，当div中的任何子代值发生变化时，如何检测变化？
4 个解决方案
解决方案1
3 2012-06-06 07:58:33
You can do something like this: 你可以这样做：
$('#a, #b').on('change', function() {
$('#product_descriptioncontent').css('border', '1px solid green')
});
解决方案2
3 已采纳 2012-06-06 08:12:01
The onchange event only fires when the element loses focus, that is, when it blur s with a different value than when it gained focus . onchange事件仅在元素失去焦点时才触发，也就是说，当元素blur时获得的value与获得focus时的value不同。
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 keyup to multiple events for extra checks: 请注意，您还可以将keyup重新映射到多个事件以进行额外检查：
$(this).on('keyup mouseup blur', function(){
As well as simply calling $('#element').keyup() will trigger the on function 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() . 请注意，仅在jQuery 1.7+中支持.on() jQuery方法，对于较旧的版本，应使用.live() 。
解决方案3
1 2012-06-06 08:27:42
You can also do it by binding the HTML5 input event for the children elements. 您也可以通过为子元素绑定HTML5 input事件来完成此操作。 That doesn't work for IE versions less than 9, but, in these cases, you can use the propertychange event. 对于小于9的IE版本，这不起作用，但是在这种情况下，您可以使用propertychange事件。 The below code does both and because IE9 can handle both, we unbind the propertychange event in the case of IE9 since better to use the standard input event. 下面的代码可以同时实现这两个功能，并且由于IE9可以处理这两者，因此，对于IE9，我们取消绑定propertychange事件，因为更好地使用标准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问题的回答： 仅捕获更改输入的按键？
解决方案4
0 2012-06-06 07:58:09
You can add an onchange event 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.