JQuery / Javascript函数需要$(document).ready和$(document).ajaxSucces

时间:2013-09-18 16:59:19

标签: javascript jquery ajax

我有一个JQuery / Javascript函数,可以在我的网站上用于一些基本的UI功能。但是,这个函数影响的许多元素将通过Ajax注入,而其他元素将是静态html。

Currenty我已经能够通过复制函数并应用$(document).ready和$(document).ajaxSucces来让我的脚本为我工作。

我的问题是: 什么是适当的完成?

这是我的JS:

    $(document).ready(function () {
        $(".hidesfieldset:not(:first)").hide();
        $("fieldset").bind("focus click",function () {
            $(".hidesfieldset:not(:parent)").hide(800);
            $(".hidesfieldset", this).slideDown(800);

        });

    });

     $(document).ajaxSuccess(function () {
        $(".hidesfieldset:not(:first)").hide();
        $("fieldset").bind("focus click",function () {
            $(".hidesfieldset:not(:parent)").hide(800);
            $(".hidesfieldset", this).slideDown(800);

        });

    });

因为我的一些表单是通过ajax注入的,所以第一个函数不适用于它们,所以我还必须包含ajax Success。

注意*:对于JS来说,我是一个完整的新手,这是我第一次使用它,可能有点过头了。因此,如果您发现其他内容错误,请随意发表评论。

谢谢, 标记

1 个答案:

答案 0 :(得分:1)

当您通过ajax异步向页面添加对象并且想要将事件处理程序连接到其中一些新添加的对象时,您有以下选项:

  1. 您可以通过将委派事件处理程序分配给最初加载页面时页面中存在的静态父对象来使用委派事件处理。

  2. 您可以将事件处理程序添加到ajax调用的成功处理程序中的动态添加对象,该调用在将对象添加到页面后添加它们。

  3. 你可以在所有ajax调用之后检查页面中的新对象(这有点像黑客,但听起来就像你正在做的那样)。您必须非常小心,不要将重复的事件处理程序添加到此ajax调用之前已存在的对象。

  4. 如果您的页面HTML和类的结构是为它设计的,那么委派事件处理通常是处理此问题的最简单方法。以下是一些描述如何使用委托事件处理的答案:

    jQuery .live() vs .on() method for adding a click event after loading dynamic html

    JQuery Event Handlers - What's the "Best" method

    Does jQuery.on() work for elements that are added after the event handler is created?