如何将 JQuery 应用于 PHP 生成的 HTML


How to apply JQuery to PHP generated HTML?

我有一个生成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/