Question

我编写了很多动态生成的内容（在PHP下开发），我使用jQuery为我的项目增加了额外的灵活性和功能。

事情是，以一种不引人注目的方式添加JavaScript是相当困难的。这是一个例子：

您必须生成随机数量的div元素，每个元素都触发onClick不同的功能。我可以使用onclick元素上的div属性来调用带有参数的JS函数，但这只是一个糟糕的解决方案。此外，我可以在我的PHP for循环中生成一些jQuery代码以及每个div，但这又不会完全不引人注意。

那么在这种情况下解决方案是什么？

Answer 1

您需要向div添加一些内容来定义他们拥有的行为类型，然后使用jQuery选择这些div并添加行为。一种选择是使用class属性，尽管可以说这应该用于表示而不是行为。另一种方法是rel属性，但我通常会发现你还想为每个行为指定不同的CSS，所以在这个实例中类可能没问题。

因此，举个例子，我们假设你想要奇怪甚至行为：

<div class="odd">...</div>
<div class="even">...</div>
<div class="odd">...</div>
<div class="even">...</div>

然后在jQuery中：

$(document).load(function() {
$('.odd').click(function(el) {
// do stuff
});
$('.even').click(function(el) {
// dostuff
});
});

jQuery有一个非常强大的选择器引擎，它可以基于任何基于CSS的选择器找到，并且还支持一些XPath及其自己的选择器。了解他们！ http://docs.jquery.com/Selectors

Answer 2

我建议你使用名为“Event delegation”的东西。这是它的工作原理。

因此，如果你想更新一个区域，比如一个div，并且你想要不显眼地处理事件，你可以将一个事件处理程序附加到div本身。使用您喜欢的任何框架来执行此操作。无论您是否更新了div，事件附件都可以随时发生。

附加到此div的事件处理程序将接收事件对象作为其参数之一。使用此事件对象，您可以确定触发事件的元素。您可以多次更新div：div的子节点生成的事件将冒泡到div，您可以捕获并处理它们。

如果您考虑将多个处理程序附加到div中的许多元素，这也是一个巨大的性能优化。

Answer 3

我建议忽略W3C标准，并在需要处理程序的元素上写出HTML属性：

注意：这将不打破页面的渲染！

<ul>
    <li handler="doAlertOne"></li>
    <li handler="doAlertTwo"></li>
    <li handler="doAlertThree"></li>
</ul>

宣布一些功能：

function doAlertOne() { }
function doAlertTwo() { }
function doAlertThree() { }

然后像这样使用jQuery：

$("ul li").each(function ()
{
    switch($(this).attr("handler"))
    {
        case "doAlertOne":
            doAlertOne();
            break;

        case ... etc.
    }
});

务实。

Answer 4

从你的问题中说出来有点难，但也许你可以使用不同的jQuery选择器来设置不同的点击行为？例如，假设您有以下内容：

<div class="section-1">
    <div></div>
</div>
<div class="section-2">
    <div></div>
</div>

也许你可以在jQuery中执行以下操作：

$('.section-1 div').onclick(...one set of functionality...);
$('.section-2 div').onclick(...another set of functionality...);

基本上，根据上下文决定需要发生什么。您还可以选择所有div并测试某些父元素或子元素，以确定它们获得的功能。

我必须更多地了解你的具体情况，以提供更有针对性的建议，但也许这会让你开始。

Answer 5

我还没有真正了解JQuery，但我确实知道DOJO工具包确实可以使非常不引人注目的Javascript成为可能。

看一下这里的示例：http://dojocampus.org/explorer/#Dojo_Query_Adding%20Events

该演示基于类动态地将事件添加到纯html表中。

另一个例子是行为特征，如下所述：http://dojocampus.org/content/2008/03/26/cleaning-your-markup-with-dojobehavior/

如何使用动态内容生成实现不显眼的javascript？

5 个答案: