Fire Jquery Event on Div Change

Fire jQuery event on div change

You can use DOMNodeInserted and DOMNodeRemoved to check if elements are added or removed. Unfortunately, IE doesn't support this.

$('#myDiv').bind('DOMNodeInserted DOMNodeRemoved', function(event) {
    if (event.type == 'DOMNodeInserted') {
        alert('Content added! Current content:' + '\n\n' + this.innerHTML);
    } else {
        alert('Content removed! Current content:' + '\n\n' + this.innerHTML);
    }
});

---

Update

You could save the initial contents and future changes with .data(). Here's an example.

var div_eTypes = [],
    div_changes = [];
$(function() {
    $('#myDiv').each(function() {
        this['data-initialContents'] = this.innerHTML;
    }).bind('DOMNodeInserted DOMNodeRemoved', function(event) {
        div_eTypes.concat(e.type.match(/insert|remove/));
        div_changes.concat(this.innerHTML);
    });
});

Example output:

> $('#myDiv').data('initialContents');
"<h1>Hello, world!</h1><p>This is an example.</p>"
> div_eTypes;
["insert", "insert", "remove"]
> div_changes;
["<iframe src='http://example.com'></iframe>", "<h4>IANA — Example domains</h4><iframe src='http://example.com'></iframe>", "<h4>IANA – Example domains</h4>"]

---

Update 2

You may want to include DOMSubtreeModified as well, because I've found out that DOMNodeInserted and DOMNodeRemoved don't trigger if an element's innerHTML is replaced directly. It still doesn't work in IE, but at least it works fine in other browsers.

jQuery change event on a DIV

The problem is the events bubble up - you have to capture the change event on the input, and stop it from propagating:

 $("#t").on('change', function(e) {
     e.stopPropagation();
 });

https://jsfiddle.net/8m3s087e/3/

jQuery event that triggers when the element had some structure change

Since you're asking about JQuery, I ran into a similar challenge and found the answer here in another question:

jQuery: How to listen for DOM changes?

I hope this helps!

How to fire an event on class change using jQuery?

There is no event raised when a class changes. The alternative is to manually raise an event when you programatically change the class:

$someElement.on('event', function() {
    $('#myDiv').addClass('submission-ok').trigger('classChange');
});

// in another js file, far, far away
$('#myDiv').on('classChange', function() {
     // do stuff
});

---

UPDATE - 2015

This question seems to be gathering some visitors, so here is an update with an approach which can be used without having to modify existing code using the new MutationObserver:

var $div = $("#foo");
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    var attributeValue = $(mutation.target).prop(mutation.attributeName);
    console.log("Class attribute changed to:", attributeValue);
  });
});

observer.observe($div[0], {
  attributes: true,
  attributeFilter: ['class']
});

$div.addClass('red');

.red {
  color: #C00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="foo" class="bar">#foo.bar</div>

jQuery Call a function when content of a div changes

Meanwhile deprecated!
While this should still work, be aware that DOMSubtreeModified has been deprecated see also Mozilla Doc. Thx to @LuisEduardox for pointing this out.

The original post:
If possible I would try to call the wished function from the other script. But if you really want to listen for changes on the element you can make use of DOMSubtreeModified. If you change the content via jQuery though it will call your function twice! Therefore use vanilla JavaScript for changing the content.

function versandkosten() {
    console.log('called versandkosten');
}
$(document).ready(function(){
  var $basketAmount = $('.basket_amount');
  $basketAmount.bind("DOMSubtreeModified", versandkosten);

  // test changing the content of the element via JavaScript
  $basketAmount[0].innerHTML = 77;

  // changing it via jQuery would call it twice!
  // $basketAmount.html(77);
});

Fiddle: https://jsfiddle.net/9our3m8a/

jquery trigger event on change inputs in div

I'm not sure what "set a var to recognize a change" means exactly, but here's what I'd do to change a variable when an input inside a particular element is changed:

var myVar;

$('#someDiv input, #someDiv select').each(function() {
    $(this).change(function() {
        // do stuff with things
        myVar = 42;
    });
});

Or:

$('#someDiv').find('input, select').each(function() { ... });

jQuery event to trigger action when a div is made visible

You could always add to the original .show() method so you don't have to trigger events every time you show something or if you need it to work with legacy code:

Jquery extension:

jQuery(function($) {

  var _oldShow = $.fn.show;

  $.fn.show = function(speed, oldCallback) {
    return $(this).each(function() {
      var obj         = $(this),
          newCallback = function() {
            if ($.isFunction(oldCallback)) {
              oldCallback.apply(obj);
            }
            obj.trigger('afterShow');
          };

      // you can trigger a before show if you want
      obj.trigger('beforeShow');

      // now use the old function to show the element passing the new callback
      _oldShow.apply(obj, [speed, newCallback]);
    });
  }
});

Usage example:

jQuery(function($) {
  $('#test')
    .bind('beforeShow', function() {
      alert('beforeShow');
    }) 
    .bind('afterShow', function() {
      alert('afterShow');
    })
    .show(1000, function() {
      alert('in show callback');
    })
    .show();
});

This effectively lets you do something beforeShow and afterShow while still executing the normal behavior of the original .show() method.

^{You could also create another method so you don't have to override the original .show() method.}

JQuery Check for DIV contents change

The change event is not available on all elements - so it will not fire even if the contents of a div element changes.

The change event is available on form elements.

It looks like your need is to work out when a particular form element becomes available, you could check for that using an interval:

var checkForInputTimer;
var checkForInput = function () {
    if ($("#checkout_provider_checkout_moneyorder").length > 0) {
        window.clearInterval(checkForInputTimer);
        alert("Do your processing here");
    }
};

checkForInputTimer = window.setInterval(checkForInput, 2000);

In this example I am just checking for the element by id, which is the most efficient search given that ids must be unique.

You could also create a custom event, but you will have to remember to trigger the event in whatever code you are using to update the div element. I have created a JS Fiddle for this:

$('div.provider_name').bind('contentChanged', function(event, data) {
    if ($('#checkout_provider_checkout_moneyorder').length > 0) {
        alert('Do your processing here');
    }
});

And wherever you update the div, you trigger this event:

$('div.provider_name').html('<input type="text" name="example" id="checkout_provider_checkout_moneyorder" value="example">')
    .triggerHandler('contentChanged');

---

Related Topics