title: Alternative for DOMSubtreeModified jQuery
body: <p>How can I write an alternative function for <code>DOMSubtreeModified</code>? </p>
  
  <pre class="lang-js prettyprint-override"><code>$('html').bind('DOMNodeInserted DOMNodeRemoved', function(event) {
    var structure = $(event.target).closest(".form--group");
    structure.find(".thevoornaam, .date_of_birth, .stepbirthVal, .livingkid, .right, .limitSelected, .pijlers, .total_pijlers").on("keyup change DOMSubtreeModified", function() {
      if (structure.find(".thevoornaam").val().length &gt; 1 &amp;&amp; structure.find(".date_of_birth").val().length &gt; 1 &amp;&amp; structure.find('.stepbirthVal').html() == "" &amp;&amp; structure.find(".livingkid").is(':checked') &amp;&amp; structure.find(".right").is(':checked') &amp;&amp; structure.find(".limitSelected:checked").val() == "1" &amp;&amp; structure.find(".pijlers").val() != null &amp;&amp; structure.find(".total_pijlers").val() != null) {
        $("#stepbirth").removeClass("disabled");
      } else if (structure.find(".thevoornaam").val().length &gt; 1 &amp;&amp; structure.find(".date_of_birth").val().length &gt; 1 &amp;&amp; structure.find('.stepbirthVal').html() == "" &amp;&amp; structure.find(".livingkid").is(':checked') &amp;&amp; structure.find(".right").is(':checked') &amp;&amp; structure.find(".limitSelected:checked").val() == "0") {
        $("#stepbirth").removeClass("disabled");
      } else {
        $("#stepbirth").addClass("disabled");
      }
    });
  });
  </code></pre>
  
  <p>This function is working fine but i am getting this message in browser console.</p>
  
  <blockquote>
    <p>[Violation] Added synchronous DOM mutation listener to a  event. Consider using MutationObserver to make the page more responsive.</p>
  </blockquote>
  
  <p>Can anyone help me with this? </p>
  
  <p>Thanks in advance.</p>