Question

我的HTML末尾有一些函数，它们使用jquery来做一些事情

function transformacija() {
    if ($("#drugiPrviPage").hasClass("pocetna")) {
        $("#drugiPrviPage").velocity({
                left: "-100%",
                opacity: 0.3
            },
            "slow"
        )
        $("#drugiPodPage").velocity({
                right: "10%",
                opacity: 1
            },
            "slow"
        )
    } else {
        $("#drugiPrviPage").velocity({
                left: "10%",
                opacity: 1
            },
            "slow"
        )
        $("#drugiPodPage").velocity({
                right: "-100%",
                opacity: 0.3
            },
            "slow"
        )
        $("#prviPage").removeClass("pocetna");
        $("#drugiPodPage").empty();

    }

}



$(".prvilinkovi").click(function() {
    var id = $(this).attr('id');
    var idt = id + '.txt';
    $(document).ajax({
        url: [idt],
        type: "GET",
        cache: false,
        success: function(txt) {
            $("#drugiPodPage").html(txt);

        }
    });
    transformacija();

});
}

基本上，当我点击带有“prvilinkovi”类的按钮时，我将内容加载到带有ajax的div中，然后我在ajax加载的div上有相同的按钮，我希望它具有与初始点击的按钮相同的功能。我在“ajaxloaded”按钮中添加了“pocetna”类，但它没有像第一个按钮那样的功能。

我如何委托函数处理加载ajax的内容？

我已经尝试将代码放入init函数并在ajaxcomplete事件上调用它，但它似乎根本不起作用（即使我在document.ready（）上使用它来调用init函数。< / p>

当我点击一个带有很酷的速度动画的类别时，我选择了这种ajax加载方法来动态加载页面部分，以获得网站的单页模型，当你回去时它会清空div并为下一个类别做好准备点击。

Answer 1

确定。根据我的理解，你可以这样做：

保留一个公共课程，对两个div pocetna和drugiPodPage说drugiPrviPage。
将点击事件附加到document或DOM load上显示的任何最近元素。由于在pocetna期间会出现document.ready课程，我们会将事件附加到该课程，并将其委托给其按钮，如下所示：

<强> JS

$('.pocetna').on('click',".prvilinkovi",function() {
    var id = $(this).attr('id');
    var parentID=$(this).closest('.pocetna').attr('id'); //get the button's parent id
    if(parentID=="drugiPrviPage") //if its previous page perform ajax call
    {
         var idt = id + '.txt';
         $(document).ajax({
              url: [idt],
              type: "GET",
              cache: false,
              success: function(txt) {
                   $("#drugiPodPage").html(txt);
                   //move the divs only on success
                   $("#drugiPrviPage").velocity({
                        left: "-100%",
                        opacity: 0.3
                   },"slow");
                   $("#drugiPodPage").velocity({
                        right: "10%",
                        opacity: 1
                   },"slow");
               }
          });
    }
    else
    {
         $("#drugiPrviPage").velocity(
         {
               left: "10%",
               opacity: 1
         },"slow");
         $("#drugiPodPage").velocity(
         {
               right: "-100%",
               opacity: 0.3
         },"slow");
         $("#drugiPodPage").empty();
    }
});

在ajax加载的元素Jquery上包含现有的jquery函数

1 个答案: