2

我有一些如下代码：

<html>
    <body>
        <div id="product_descriptioncontent">
            <input type="text" id="a" />
            <textarea id="b" />
        </div>
    </body>
<html>

这意味着，我的 div 包含输入、文本区域或图像。但我的问题是如何检测 div 中任何子值发生变化时的变化？

4

4 回答 4

3

该onchange事件仅在元素失去焦点时触发，也就是说，当它blur的 s 与value它获得时不同focus。

我不知道有任何本地侦听器会实时提供此类功能，但您可以尝试使用 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());
});​​

JSFiddle

请注意，您还可以将 重新映射keyup到多个事件以进行额外检查：

$(this).on('keyup mouseup blur', function(){

如果您需要在没有用户输入任何内容的情况下调用它，那么简单地调用$('#element').keyup()将触发该元素的函数。on=]

请注意，.on()jQuery 方法仅在 jQuery 1.7+ 中受支持，对于旧版本，您应该使用.live().

于 2012-06-06T08:12:01.023 回答
3

You can do something like this:

$('#a, #b').on('change', function() {
   $('#product_descriptioncontent').css('border', '1px solid green')
});
于 2012-06-06T07:58:33.790 回答
1

您也可以通过input为子元素绑定 HTML5 事件来实现。这对于低于 9 的 IE 版本不起作用，但在这些情况下，您可以使用该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
    });
});

这是一个 jsfiddle 链接：http: //jsfiddle.net/yNxaW/

这部分是基于对另一个 stackoverflow 问题的回答：仅捕获更改输入的按键？

于 2012-06-06T08:27:42.610 回答
0

You can add an onchange event listener.

<html>
    <body>
        <div id="product_descriptioncontent">
            <input onchange="somefunction(this)" type="text" id="a" />
            <textarea onchange="somefunction(this)" id="b" />
        </div>
    </body>
<html>
于 2012-06-06T07:58:09.653 回答