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?

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?

• javascript
• jquery
• events
• bind

Share Improve this question Follow asked Nov 30, 2016 at 17:59 KarricKarric 1,57522 gold badges2222 silver badges3434 bronze badges 3

• 3 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. – T.J. Crowder Commented Nov 30, 2016 at 18:02
• Give the function that is doing the modifications the "myfunction" function as a callback. – andre mcgruder Commented Nov 30, 2016 at 18:06
• @T.J.Crowder sorry I'm 8 years late. I updated my answer to coincide with your ment. – zer00ne Commented Sep 26, 2024 at 17:53

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Update (Sep. 26, 2024)

The following ment 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./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./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./ajax/libs/jquery/3.4.0/jquery.min.js"></script>