我有一个生成HTML元素的PHP文件,并在页面加载时从AJAX调用。我想做的是将 JQuery 应用于动态生成的元素,因此每次单击从 PHP 文件生成的标签时,都会发生一些事情。我尝试将 JQuery 代码放在 PHP 文件中并回显出来,但这不起作用,我还将代码放在调用 AJAX 的 HTML 页面中,但这也没有用。
在我的 HTML 中,我有:
<body onLoad="javascript:getLabels();">,
这通过 AJAX 调用 php 文件:
function getComments() {
var thePage ='loadLabels.php';
...
PHP 文件作为行:
echo '<label id="labellink" class="ldClass">Label </label>';
加载后页面中可能有多个标签,但都在他们的一个<form>
中,所以我需要使用 JQuery,所以一旦加载标签并单击它们,我就可以做点什么。
有两种方法可以实现您想要的。
1:将事件附加到 AJAX 调用的 onSuccess 内的链接以检索内容。这样,当新内容添加到 DOM 时,您将必要的事件附加到这些特定元素。
2:建议的解决方案是使用事件委派。基本上,不是将事件附加到特定元素,而是将单个事件附加到父元素容器,当事件被触发时,它基于条件条件单击的目标(如果它本身具有特定类(执行特定操作。这是一种用于处理流体/可变内容的技术,而无需将事件 r 附加到特定元素。jQuery的.on(( API方法优雅地提供了这样的解决方案: http://api.jquery.com/on/
例如:
$("#container").on("a.changeColor", "click", function() {
$(this).toggleClass("newColor");
});
使用 id="container" 将事件委托/附加到父元素,告诉它您希望所有具有"changeColor"类的子锚元素切换"newColor"类。即使在更新和更改 #container 元素的内部内容后,具有类"changeColor"的新元素仍将继承单击时的行为。
.on()
(文档(提供了一种为动态元素创建处理程序的方法,在创建处理程序时可能不一定存在。
要使用 .on()
,您需要将处理程序附加到 DOM 树中更高的非动态对象。 单击将从子元素向上传播树,此时附加.on()
的处理程序(委托(将使用提供的筛选器来查看单击是否源自正确的对象(这将是您的动态对象(。
$('body').on('click', '.dynamic_element', function() {
// Handler code
});
在这种情况下,我使用了 body
,因为它不会消失并带走处理程序。 您可以将处理程序附加到任何作为 .dynamic_element
祖先的对象,只要它是静态元素。 通常越近越好,但如果您的页面非常动态,body
就可以了。
.on()
背后的整个思想是处理程序必须附加到现有的 DOM 元素。 如果对象尚不存在,则无法向其附加处理程序,如果删除了元素,则处理程序也会被删除。 这就是为什么$('.dynamic_element').click()
不起作用的原因,除非.dynamic_element
已经存在。 因此,使用 .on()
,我们只需将处理程序附加到我们知道确实存在(并且不会消失(的东西上。 此处理程序称为"委托"。 它监视来自其子对象的事件,这些子对象本质上是 DOM 元素,会沿树向上传播。
你想要的是jQuery"live"http://api.jquery.com/live/
编辑:您希望.on((在较新版本的jQuery中,因为.live((已被贬值:http://api.jquery.com/on/
有关详细信息,请参阅下面的评论。
编辑 感谢您纠正我。由于它被折旧了,我已经有一段时间没有使用它了。
我敢肯定,这更像是一种"黑客"而不是解决方案,如有必要,我会公开欢迎投反对票,但您可以将后 AJAX 功能放在成功函数中。
此外,旧版本的jQuery使用了一个名为.live()
的函数,该函数将查找一个元素,无论它是否在DOM中。它在最新版本的jQuery中被贬低了,但如果你愿意迈出这一步,我知道它在1.5中工作。(我说的是类似$(a).live('click', function () { });
的东西(。
作为记录,我很想将其作为评论而不是答案发布,但我还没有足够的街头信誉。
只是动态创建元素和加载绑定事件的一个例子
var a = $("<a>").attr('href','#')
.attr('class','elem')
.text('click me')
.prependTo('body');
$(document).on("click", "a.elem", function(e){
e.preventDefault();
alert("Goodbye!");
});
使用 .delegate(( 是我用过的最好的方法。
请参阅 http://api.jquery.com/delegate/