CODEWITHSUNDEEP
javascriptjqueryhtmldom
Reece Kenney
Reece Kenney

Reputation: 2964

Detect new DOM elements and changes to input boxes - JQuery

Take a look at the following HTML:

<div id="tab1">
    <input type="text">
</div>

<div id="tab2">
    <input type="text">
    <button>Add New Input Box</button> <!-- Adds another <input type="text"> in tab -->
</div>

<div id="tab3">
    <input type="text">
    <button>Hide Input Box</button> <!-- Adds style 'display:none' to input -->
</div>

I am looking for a way to detect changes to the DOM with JQuery. I am aware of MutationObserver objects and these are great but I would only like to detect changes in the following scenarios:

And NOT detect changes where:

Of course MutationObserver will flag the changes when the HTML attributes change (which I don't want) but it will not flag when a user types into an input box (which I do want). For this reason I am thinking MutationObserver objects are not suitable for this problem (correct me if I'm wrong).

Are there any other things I can use for this?

My Scenario: Just to give you some more context, I am creating a save prompt to a data entry app that contains multiple tabs. It is easy to forget to save your changes before moving to the next tab but sometimes you may want to move to another tab without saving yet. I am trying to show the user an alert informing them that they have not saved when they click the next tab. Some fields can be hidden/shown on the click of a button which MutationObserver will detect as a change to the DOM even though they may not have entered any new values. Some values can be pulled from another location at the click of a button via ajax which although the user has not typed anything, it should still be flagged as a change that needs to be saved as the DOM has changed.

Upvotes: 1

Views: 2277

Answers (1)

gaetanoM
gaetanoM

Reputation: 42054

To detect new elements added or removed from tab2, only add and remove elements, you may use the events: DOMNodeInserted DOMNodeRemoved, while for the changes to the input field you may use the input event. These events are deprecated because they will be removed from the web. For a better description see Mutation events

$(function () {
  $('div,  #tab1 input').on('DOMNodeInserted DOMNodeRemoved webkitTransitionEnd input', function (event) {
    switch (event.type) {
      case 'input':
        if (event.target.parentNode.id == 'tab1') {
          event.stopImmediatePropagation();
          alert('Content changed');
        }
        break;
      case 'DOMNodeInserted':
        if (event.target.parentNode.id == 'tab2') {
          alert('Content added!');
        }
        break;
      case 'DOMNodeRemoved':
        if (event.target.parentNode.id == 'tab2') {
          alert('Content removed');
        }
        break;
    }
  });
  $('#add').on('click', function (e) {
    $(this).after('<input type="text">');
  });
  $('#remove').on('click', function (e) {
    $(this).siblings('input').remove();
  });
  $('#tab3 button').on('click', function (e) {
    $(this).siblings('input').toggle();
  })
});
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<div id="tab1">
    <input type="text">
</div>

<div id="tab2">
    <input type="text">
    <button id="add">Add New Input Box</button>
    <button id="remove">Remove All Input Boxes</button>
</div>

<div id="tab3">
    <input type="text">
    <button>Hide/Show Input Box</button>
</div>

Upvotes: 1

Related Questions