title: AJAX function on body change but generated html object on keyup
body: <p>In the following code, I have it currently set up that this function will trigger when the body of the webpage changes. Then it will look for <code>widget-pb-0-box_id</code>. If that exists, as it doesn't exist on load. Now the function will keep checking to see if the <code>widget</code> is changed then, will send the AJAX call. I would like to set this function so that the function will get triggered when <code>body</code> changes. And then <code>widget...</code> gets triggered on <code>keyup</code>. I tried by having nested functions however it cascades the calls and end up calling the function n+1 times every <code>keyup</code> in <code>widget...</code>.</p>
  
  <pre><code>$('body').on('change', '#widget-pb-0-box_id', function (e) {
      var data = {
          //data to be sent
      };
  
      $.post(ajaxurl, data, function (response) {
          //AJAX call
      });
  });
  </code></pre>