javascript - jQuery 脚本无法处理从另一个页面附加的 html

Question

我已经提到了这些答案，但这并没有解决:

jQuery on button click not working after append

Jquery click event not working after append method

我想像这样在页面加载时加载用于单击按钮的 html:(这正确显示了带有 css 的 html，但脚本不工作)

$.get( "/plugins/system/conversekit/conver/test.php", function( data ) {
       $('body').append(data);
    }, "html" );

但如果我以这种方式加载 html，脚本将起作用:

$('body').append('<div id="ckit" class="layout-compact is-hiddenx"\
     data-ckit-compact style=""><a href="javascript:void(0);"\
      class="btn-toggle-ckit" data-ckit-toggle-on><i class="fa fa-comment-o">\
      </i></a></div><div id="ckit" class="layout-full is-hidden disable-scrolling" data-ckit-full>\
      <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;"></iframe></div>');

脚本:

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();
        });

HTML

<div id="ckit" class="layout-compact is-hiddenx" data-ckit-compact style="">
    <a href="javascript:void(0);" class="btn-toggle-ckit" data-ckit-toggle-on><i class="fa fa-comment-o"></i></a>
</div>

<div id="ckit" class="layout-full is-hidden disable-scrolling" data-ckit-full>
    <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;"></iframe>
</div>

我试图避免委派但没有帮助，

$('body').on('click',toggleCkitOn, function(e) {...});

尝试使用其他 promises 来检查 ajax 是否正常运行，我得到了以下所有的执行而没有错误:

1) 成功2)第二次成功3) 完成

 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" );
          });

工作答案(但我希望变量是全局范围的，在这个函数之外声明它们会使点击不起作用):

$("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();
        } );

Answer 1

function ckitDelegate() {
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();
        });
};

$.get("/plugins/system/conversekit/conver/test.php", function( data ) {
       $('body').append(data);
       ckitDelegate();
}, "html").fail(function() {
alert( "error" );
});

这是我最后的意见，如果它也不起作用我会放弃:

$.get("/plugins/system/conversekit/conver/test.php", function( data ) {
  $('body').append(data);
  setTimeout(function(){ ckitDelegate(); }, 500);
}, "html");