Question

我有一些代码如下：

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

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

Answer 1

您可以这样做：

$('#a, #b').on('change', function() {
   $('#product_descriptioncontent').css('border', '1px solid green')
});

Answer 2

onchange事件仅在元素失去焦点时触发，即blur时value与获得focus时的keyup不同。

我不知道任何可以实时提供此类功能的本机监听器，但您可以尝试操纵jQuery的.data()方法来存储当前值并在标准键盘事件中检查它，例如$('#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()); });：

keyup

JSFiddle

请注意，您还可以将$(this).on('keyup mouseup blur', function(){重新映射到多个事件以进行额外检查：

$('#element').keyup()

如果您需要在没有用户输入任何内容的情况下调用它，那么简单地调用on将触发该元素的{{1}}函数。 =]

请注意，只有jQuery 1.7+支持.on() jQuery方法，对于旧版本，您应该使用.live()。

Answer 3

您也可以通过绑定子元素的HTML5 input事件来完成此操作。这对于小于9的IE版本不起作用，但在这些情况下，您可以使用propertychange事件。下面的代码同时执行，因为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
    });
});

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

这部分是基于另一个stackoverflow问题的答案：Catch only keypresses that change input?

Answer 4

您可以添加onchange事件监听器。

<html>
    <body>
        <div id="product_descriptioncontent">
            <input onchange="somefunction(this)" type="text" id="a" />
            <textarea onchange="somefunction(this)" id="b" />
        </div>
    </body>
<html>

如何使用jquery检测div子内容何时更改

4 个答案: