Question

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

如果它还将处理现有元素，那就太棒了......比如Live Query适用于click（）调用时存在的元素和未来创建的元素。

请注意，我很乐意只跟踪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（）。

Answer 1

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

Answer 2

您可能正在寻找的是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>

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

我在你的问题中提到了你选择的datepicker，但事件授权的想法可以应用于许多不同的情况，not all events bubble。

Answer 3

您可以创建一个例程来执行作用于特定根jQuery对象的插件初始化。像这样：

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

您的文档就绪处理程序可以将其称为：

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

虽然您的Ajax处理程序可以像这样调用它

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

它不是完全自动化的，但它不应该是。 Ajax HTML应该被认为是“新鲜的”和未经处理的。自动附加插件会让我像SQL触发器一样震撼。至少在我的方法中，你重复使用用于附加插件的相同代码。

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

3 个答案: