Question

正如我多年来一直在做的那样，我可以使用PHP（从数据库获取信息）创建动态HTML。

例如，假设我想动态创建x个链接，我的PHP脚本最终会回显：

<a id=link1 href=>Link 1</a>
<a id=link2 href=>Link 2</a>
//etc....

哪个好。但是，如何根据jQuery代码处理这些按钮的动态特性？假设我希望每个链接都显示一个警告“Hello World”：

$('#link1').click(function() {
                 alert("Hello World");
                 return false;
                });

我是否必须使用PHP为每个动态创建的链接复制此代码？我当然知道这不是正确的事情，但是我坚持使用最好的方法

我感谢任何帮助

干杯

Answer 1

不，您可以为链接分配一个类，并使用它来附加点击功能

<a class='links' id=link1 href= '#' >Link 1</a>
<a class='links' id=link2 href='#' >Link 2</a>

$('a.links').click(function() {
                 alert("Hello World");
                 return false;
                });

Answer 2

如果所有需要的id共享相同的前缀（此处为link），则没有问题。有一个选择“开始于”：

// This will select all a-elements where the id starts with "link"
$('a[id^="link"]').click(function(event){
    alert("Hello World");
    return false;
});

在此查看更多示例：http://api.jquery.com/attribute-starts-with-selector/

Answer 3

任何来自服务器端的HTML（例如PHP或ASP.NET）都可以像处理普通的静态HTML一样对待。就您的浏览器而言，这不是动态创建的。

如果我们在客户端上讨论动态创建的元素（比如使用Javascript / jQuery创建链接）那么完全不同。您必须调整自己的Javascript才能解决这个问题，例如使用.delegate()和.live()而不是仅仅使用香草.bind()调用。

至于你关于同时定位多个元素的问题，这样做的语义方法是使用类。所以，像

<a href="#" id="link1" class="foo">Linky linky</a>
<a href="#" id="link2" class="foo">Linky linky</a>
<a href="#" id="link3" class="foo">Linky linky</a>

可以通过类似

之类的东西立即定位

$('a.foo').click(function() {
    alert();
});

此外，如果您想要停止链接，请点击以下链接到实际网址，jQuery可以使用此代替return false;轻松实现：

$('a.foo').click(function(e) {
    alert();
    e.preventDefault();
});

如果您愿意，也可以调用e.stopPropagation()来阻止事件冒泡到父元素。有时候，我只是认为return false功能性太大了。

Answer 4

您可以为每个链接添加一个类，并使用该类绑定您的事件代码。

$(".DynamicLinks").click(function() {
                  alert("Hello World");
                  return false;
                  });

使用jQuery的动态元素

4 个答案: