Fire event once on DOM change

Question

I'm using the following jQuery:

$('table').bind("DOMSubtreeModified",function(){
   myfunction();
});

The contents of the table are modified by another function. However, this triggers the above for every element in the table that is changed.

Is there a way to fire only once after all table-changes have been made?

Answer 1

Update (Sep. 26, 2024)

The following comment by TJ. Crowder is correct which makes Answer B and Demo B invalid.

"Don't use DOM mutation events at all, they're deprecated and actively being removed from browsers. Use mutation observers and watch the table for subtree modifications."

Please refer to Answer A and Demo A

Answer A (valid)

Use Mutation Observer to detect any changes to a DOM node. In Demo A click the button to add a <td> to the <table>, which will be observed by the observer as a mutation (change) to the <table>. .disconnect() method is then invoked so that the observer is ran only once. Note any further modifications to table do not trigger anything.

Demo A (valid)

$('button').click(function() {
  $('table tr').append('<td>TEST</td>');
});

/**
 * The following is a modified version from this post:
 * https://stackoverflow.com/a/25083738/2813224
 */
 
// Dereferenced jQuery object of <table>
const table = $("table")[0];
/**
 * Options for the observer.
 * This particular setup directs the observer to observe any
 * additions or removals of any DOM node.
 */
const config = {
  childList: true, 
  subtree: true 
};

// Create an observer instance
const observer = new MutationObserver(function(changes) {
  // If there is a node added...
  if (changes[0].addedNodes) {
    // log message to the console...
    console.log("Table has been modified");
    // then stop the observer from observing
    this.disconnect();
  }
});

// Start the observer to observe mutations (changes) to <table>
observer.observe(table, config);

table,
td {
  border: 1px solid black;
}

table {
  width: 300px;
  height: 50px;
}

<table>
  <tr></tr>
</table>
<button>addTD</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

Answer B (invalid)

Use .one() to register once for an event. In this Snippet click the button to add a <td> to table, thereby triggering the DOMSubtreeModified event only once. Note any further modifications to table do not trigger anything.

Demo B (invalid)

$('button').click(function() {
  $('table tr').append('<td>TEST</td>');
});

$('table').one("DOMSubtreeModified", function() {
  alert('MODIFIED');
});

table,
td {
  border: 1px solid black;
}

table {
  width: 300px;
  height: 50px;
}

<table>
  <tr>
    <td></td>
  </tr>
</table>
<button>addTD</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>