document.ready（）模拟$（html）/ $。ajax

我使用jQuery在$（document）.ready（）处理程序中附加一些插件 - 例如$（“。date”）。datepicker ）。然而，当我使用$（“... html ...”），例如从$ .ajax（..，success（data）{}）或ajaxForm（{target：...}）加载内容时，，document.ready（）显然不会被调用。更新：如指出它是调用，但我仍然不知道部分/元素被加载。

我不能再做ready（），因为它会再次将插件重新连接到已有的元素。因此，我必须在每种情况下手动执行此操作，例如，我成功（数据）{item = $（data）; initDatePickerEtc（项目）; }。

有没有更好的方法？

有Live Query插件可以处理事件。有什么可以让我跟踪HTML元素的创建并执行操作吗？像

$.oncreation(".date", function() { $(this).datepicker(); }); 
// or at least 
$.oncreation(function() { $(this).find(".date").datepicker(); });

大的东西，如果它也将处理现有的元素...像实况查询工作在点击（）调用的时候都存在，而未来创建的元素。

请注意，我会很高兴跟踪由jQuery创建的元素。所以它可能是jQuery为它的html（）函数提供了扩展点，我猜。现在，从jQuery源也没有：

html: function(value) { 
    return value === undefined ? 
     (this[0] ? 
      this[0].innerHTML.replace(/ jQuery\d+="(?:\d+|null)"/g, "") : 
      null) : 
     this.empty().append(value); 
},

也许，如果我取代HTML（），使得即使3-第三方插件（比如给ajaxForm）会用我的版本（这将触发$ .creation回调），而不是默认的jQuery的一个...它会工作吗？这种方法存在问题 - 它不仅仅是html（），还有append（）等等，只有当$（“”）的结果被附加到文档时，才能获得事件。因为当它在内存中时，我不需要datepicker（）。

来源

2009-10-19 queen3

如果它是您的选项，您可以在返回的html中包含一个$（document）.ready（）语句。在那里传递的函数将在返回的html被渲染后被调用。

来源

2009-10-19 20:00:18

我将需要从那里获得对加载部分的引用。如果我做$（document）.ready（function（）{$（“*”）.css（'background-color'，'red'）;}）;在加载的部分，整个页面将变成红色而不是仅加载的div。 – queen3 2009-10-19 20:09:10

是的。我解决了这个问题，通过在元素中添加一个类并在再次执行时进行筛选：$（'*'）。not（'。doneAlready'）。css（...）。addClass（'doneAlready'）; – 2009-10-19 20:13:07

好的方法，并将工作，+1。我想知道在全局数组中跟踪它是否更好 - 我实际上关心的是大页面并将类添加到每个元素中......看起来像一个黑客。所以我希望有更清晰的方法。但如果没有人认为我必须接受这个解决方案。 – queen3 2009-10-19 20:20:49

你可能找什么是W3C mutation events，如DOMNodeInserted和DOMNodeRemoved不幸的是，他们没有被所有的浏览器（the IE family of browsers do not support them at all）的支持，所以我们需要看看实现跨浏览器功能的其他方式。

的方式，live()工作原理是利用event delegation，这是可能的，你可以在自己的代码实现事件代表团。作为example，

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" type="text/css" /> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> 
<title>Demo</title> 
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
<script type="text/javascript"> 
$(function() { 
    $('.picker').datepicker(); 

    $('button').click(function() { 
     $(this).prev().before('<br/><input type="text" class="picker" />'); 
    }); 

    $('div.container').click(function(e) { 
     var target = $(e.target);  
     if (target.hasClass('picker') && !target.hasClass('hasDatepicker')) { 
     $(e.target).datepicker().datepicker('show'); 
     } 
    }); 
}); 
</script> 
</head> 
<body> 
<div class="container"> 
<input type="text" class="picker" /> 
<br/> 
<button>Add a new input</button> 
</div> 
</body> 
</html>

在这里，我们检查容器<div>上event.target，看它是否有类picker而不是类hasDatepicker（这是由日期选择器插件添加到指示与日期选择器的输入附）。如果event.target符合标准，我们将日期选择器绑定到它，然后在其上调用datepicker('show')。如果event.target已经有一个日期选择器，那么点击输入将显示日期选择器，如果event.target没有picker类或没有附加日期选择器，则不会发生任何事情。

我选择了datepicker，因为你在你的问题中提到过它，但是事件委托的想法可以应用于许多不同的情况，但是，not all events bubble。

来源

2009-10-19 20:39:34

伟大的写作！如果您需要对不冒泡的事件进行事件委托，则可以使用livequery - http://docs.jquery.com/Plugins/livequery - 它比jquery $ .live样式事件委派的性能差，但是它可以捕捉不起泡的事件。干杯。 – 2009-10-19 21:24:55

不知道事件如何帮助我 - html（）/ append（）是什么事件？那么，除了那些我不能使用，因为用户仍然使用IE6 ... – queen3 2009-10-20 07:58:44

您可以创建一个例程来执行插件初始化范围到特定的根jQuery对象。事情是这样的：

function AttachPlugins(jq) { 
    jq.Find('.date').datepicker(); 
    // other stuff 
}

你的文件准备好处理函数可以调用它像：

$(document).ready(function(){ 
    AttachPlugins($(body)); 
});

当你的Ajax处理函数可以调用它像这样

var newElement = $(html); 
AttachPlugins(newEleemnt);

这不是完全自动化的，但它不应该。 Ajax HTML应被视为“新鲜”且未经处理。自动附加插件会让我感觉到SQL触发器的做法。至少在我的方法中，您重复使用了用于附加插件的相同代码。

来源

2009-10-19 23:06:16

正如我所说，这是我现在所做的：“我做成功（数据）{项目= $（数据）; initDatePickerEtc（ item）;}。“ – queen3 2009-10-20 06:33:10

我的答案不同。我的答案指定您从就绪和从Ajax回调中调用相同的函数。你没有说你从你准备好的处理程序中调用了initDatePickerEtc，initDatePickerEtc也没有看到使用jq参数来限制操作。 – 2009-10-20 06:49:47

document.ready（）模拟$（html）/ $。ajax

回答

相关问题