How to detect when div children content changed using jquery

Question

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?

Do you mean detecting changes for images also? – VisioN Jun 06 '12 at 08:20 — VisioN, Jun 06 '12 at 08:20

score 3 · Answer 1 · answered Jun 06 '12 at 07:58

3

You can do something like this:

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

answered Jun 06 '12 at 07:58

thecodeparadox

86,271
21
138
164

Fabrício Matté · Accepted Answer · 2012-06-06T08:23:41.447

The onchange event only fires when the element loses focus, that is, when it blurs with a different value than when it gained 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:

$('#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

Note that you may also remap the keyup to multiple events for extra checks:

$(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. =]

Note that the .on() jQuery method is only supported in jQuery 1.7+, for older versions you should use .live().

Thanks =] Most likely someone already has a better way, I just wanted to post my way of doing things before going to bed :P tomorrow I'll check what's the accepted answer for the most suitable way to do this. — Fabrício Matté, Jun 06 '12 at 08:24

score 1 · Answer 3 · edited May 23 '17 at 11:54

You can also do it by binding the HTML5 input event for the children elements. That doesn't work for IE versions less than 9, but, in these cases, you can use the propertychange event. 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.

$(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/

This is, in part, based on the answer to another stackoverflow question: Catch only keypresses that change input?

score 0 · Answer 4 · answered Jun 06 '12 at 07:58

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>

How to detect when div children content changed using jquery

4 Answers4