Question

如果我像这样将html内容加载到DOM中，我完全没有问题，所有脚本都能正常工作。

1）

 $('body').append('<div id="ckit" class="layout-compact is-hiddenx"\
         data-ckit-compact style="">........./div>');

但是我不想这样做，而是想从另一个页面获取html，这就是问题发生的地方..

2）

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

这个负责处理事件的脚本:(在ajax调用中不能用于 2））

(function($)
{
    $(document).ready(function() {
        // Toggle to full view
        var toggleCkitOn = $('[data-ckit-toggle-on]');
        var ckitFull = $('[data-ckit-full]');
        var ckitCompact = $('[data-ckit-compact]');
        var ckitIframe = $('[data-ckit-iframe]');

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

我发现分配给变量的数据属性无法正常工作。所以我提出了这个，这很有效。

 $("body").on("click", toggleCkitOn, function(e) { 

                 $('[data-ckit-full]').removeClass("is-hidden");
                 $('[data-ckit-compact]').addClass("is-hidden");
                 $('body').addClass("disable-scrolling");
                 $("html").css({"height": "100%", "overflow": "hidden"});
                 $("body").css({"position": "relative"});
                 e.preventDefault();
            } );
.........
.........

请比较这些事情是如何改变的。

$(ckitFull) 已更改为 $('[data-ckit-full]')

或者，

如果我声明函数范围内的变量可行，但又不是正确的方法。

$("body").on("click", toggleCkitOn, 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();
        } );

但为什么无法使用$(ckitFull)？如果我没有将它们分配到变量中，那将是不正确的方法。那我该如何解决这个问题？

Answer 1

我相信 2）的问题是：

在事件处理脚本中，您可以在文档准备就绪时抓取对所需元素的引用。

$(document).ready(function() {
    // Toggle to full view
    var toggleCkitOn = $('[data-ckit-toggle-on]');
    var ckitFull = $('[data-ckit-full]');
    var ckitCompact = $('[data-ckit-compact]');
    var ckitIframe = $('[data-ckit-iframe]');

    // ... other stuff omitted

当您直接修改DOM时，您的内容会足够快地添加，以便document的{{1}}事件可以看到它。但是，当您使用AJAX调用来填充页面时，{<1}}会在从服务器收到响应之前触发。找不到与您的特殊属性匹配的元素，因为它们尚未添加到DOM 。

我建议设置变量并在ready处理程序中为jQuery的get方法添加onready侦听器。

click

Answer 2

通过仅将选择器作为目标传递来使用正确的事件委派。您正在尝试将jQuery对象作为目标传递，并且它不包含在创建该对象时不存在的元素

$("body").on("click", '[data-ckit-toggle-on]', function(e) { 

     var toggleCkitOn = $(this);// I am assuming there is only one such element...otherwise use selector
     .....

Answer 3

这时何时解决了我的问题

jQuery(function($){

    var getHtml = $.get( "/plugins/system/conver/conver/index.php", function( data ) {$('body').append(data);}, "html" );    

    $.when(getHtml).done(function() {
       $.getScript("/plugins/system/conver/conver/js/script.js");
    });

})

分配给全局范围中的变量的数据属性不适用于动态内容

3 个答案: