title: jQuery script not working on html appended from another page
body: <p>I've already referred to these answers but that doesn't solve:</p>
  
  <p><a href="https://stackoverflow.com/questions/20977821/jquery-on-button-click-not-working-after-append">jQuery on button click not working after append</a></p>
  
  <p><a href="https://stackoverflow.com/questions/15420558/jquery-click-event-not-working-after-append-method">Jquery click event not working after append method</a></p>
  
  <p>I want to load the html for click button on page load like this:(this shows the html with css correctly, but the script is not working)</p>
  
  <pre><code>$.get( "/plugins/system/conversekit/conver/test.php", function( data ) {
         $('body').append(data);
      }, "html" );
  </code></pre>
  
  <p>But if I load the html i n this way the script works:</p>
  
  <pre><code>$('body').append('&lt;div id="ckit" class="layout-compact is-hiddenx"\
       data-ckit-compact style=""&gt;&lt;a href="javascript:void(0);"\
        class="btn-toggle-ckit" data-ckit-toggle-on&gt;&lt;i class="fa fa-comment-o"&gt;\
        &lt;/i&gt;&lt;/a&gt;&lt;/div&gt;&lt;div id="ckit" class="layout-full is-hidden disable-scrolling" data-ckit-full&gt;\
        &lt;iframe src="/plugins/system/conver/conver/full-view-contact.php" data-ckit-iframe id="ckit-full-view" \
        name="ckit-full-view" scrolling="no" frameborder="0"allowtransparency="true" \
        style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%; border: 0px; padding: 0px; \
        margin: 0px; float: none; background: none;"&gt;&lt;/iframe&gt;&lt;/div&gt;');
  </code></pre>
  
  <p>SCRIPT:</p>
  
  <pre><code>var toggleCkitOn = $('[data-ckit-toggle-on]');
   toggleCkitOn.on('click', function(e) {
              $(ckitFull).removeClass("is-hidden");
              $(ckitCompact).addClass("is-hidden");
              $('body').addClass("disable-scrolling");
              $("html").css({"height": "100%", "overflow": "hidden"});
              $("body").css({"position": "relative"});
              e.preventDefault();
          });
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="ckit" class="layout-compact is-hiddenx" data-ckit-compact style=""&gt;
      &lt;a href="javascript:void(0);" class="btn-toggle-ckit" data-ckit-toggle-on&gt;&lt;i class="fa fa-comment-o"&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div id="ckit" class="layout-full is-hidden disable-scrolling" data-ckit-full&gt;
      &lt;iframe src="conver/full-view-contact.php" data-ckit-iframe id="ckit-full-view" name="ckit-full-view" scrolling="no" frameborder="0" allowtransparency="true" style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%; border: 0px; padding: 0px; margin: 0px; float: none; background: none;"&gt;&lt;/iframe&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I tried to avoid the delegation but doesn't help,</p>
  
  <pre><code>$('body').on('click',toggleCkitOn, function(e) {...});
  </code></pre>
  
  <p>Tried with other promises to check if ajax functions correctly, and I get all the below get executed without error:</p>
  
  <p><strong>1) success
  2) second success
  3) finished</strong></p>
  
  <pre><code> var jqxhr = $.get( "/plugins/system/conversekit/conversekit/test.php", function() {
            alert( "success" );
          })
            .done(function() {
              alert( "second success" );
            })
            .fail(function() {
              alert( "error" );
            })
            .always(function() {
              alert( "finished" );
            });
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/ct1ZE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ct1ZE.png" alt="enter image description here"></a></p>
  
  <p>Working answer (but i want the variables to be global scope, declaring them outside this function makes the click the doesn't work):</p>
  
  <pre><code>$("body").on("click", ".btn-toggle-ckit", function(e) { 
              var toggleCkitOn = $('[data-ckit-toggle-on]');
              var ckitFull = $('[data-ckit-full]');
              var ckitCompact = $('[data-ckit-compact]');
              var ckitIframe = $('[data-ckit-iframe]');
               $(ckitFull).removeClass("is-hidden");
               $(ckitCompact).addClass("is-hidden");
               $('body').addClass("disable-scrolling");
               $("html").css({"height": "100%", "overflow": "hidden"});
               $("body").css({"position": "relative"});
               e.preventDefault();
          } );
  </code></pre>