如何在运行时使用 jquery 创建的 div 中选择锚元素？答案

【问题标题】：How to select an anchor element inside a div created at runtime with jquery?如何在运行时使用 jquery 创建的 div 中选择锚元素？
【发布时间】：2010-09-11 08:53:16
【问题描述】：

我有这个标记：

<body>
    ...
    ...
    <div class="helper">
        <div class="menu-container">
            <ul class="menu">
                <li><a href="#" class="theLink">Link 1</a></li>
                <li><a href="#" class="theLink">Link 2</a></li>
                <li><a href="#" class="theLink">Link 3</a></li>
            </ul>
        </div>
    </div>
</body>

我想选择类“theLink”的所有元素“a”。

请注意，“helper” div 和“menu-container” div 是在运行时创建的，在单击锚点后，由另一个 jQuery 插件创建，所以我认为我需要使用jquery 的“实时”功能。

感谢您的帮助

编辑： @大家回答请看一下这个post。

基本上，我正在尝试将点击事件附加到该帖子中具有“contactRole”类的锚点。该锚点由插件修改。如果您想深入了解真正需要什么，请阅读所有 cmets。

请注意，我在这里简化了标记：这里的 class="theLink" 是昨天帖子中的 class="contactRole"。

谢谢！

【问题讨论】：

你选择它们是为了什么？
我想在上面附加一个点击事件。
请看我更新的答案。
Lorenzo - 问题不在于绑定事件。问题在于插件显示内容的方法。据我所知，元素位于屏幕外的9999px。该插件使用元素的.html() 值在需要时显示它们的副本。如果您返回到绑定事件的位置，并将.eq(2).click() 添加到末尾，您将看到第三个项目的单击事件将触发。你不能点击它，因为它不在屏幕上。我认为这是实现菜单的愚蠢方式，并且会找到不同的插件。
@patrick：好的！非常感谢您花时间帮助解决这个问题。太好了！

标签： jquery jquery-selectors

【解决方案1】：

无需使用.live()，即自动将事件附加到新创建的元素。

$(a.theLink);

将为您提供a 类型的所有元素，以及theLink 类。

【讨论】：

这不是对.live() 的准确描述，它不会将处理程序附加到新元素，它是一个被动事件侦听器。此外，您的选择器需要引号 :)

【解决方案2】：

如果您只想选择它们，所有发布的解决方案都可以完美运行，但如果您真的想在点击它们时做一些事情，试试这个：

$("a.theLink").live("click", function(event){
    //do stuff
    event.preventDefault(); // Prevent default link behaviour
});

更新

我快速阅读了插件源代码，发现一堆.click() 处理程序执行return false（第28、211、304 行等）。我对 .live() 函数的使用相当陌生，但据我了解，正如有人实际上已经在评论中指出你的另一个问题，.live() 将不适用于已经有 .click() 的元素返回 false 的处理程序。对于这个特定的插件，我认为 return false; 用于防止重复行为，例如重新打开菜单（如果已经打开），但我可能会离开。

很难为您的问题提供明确的答案，主要是因为这需要我知道该插件非常好，而我显然不知道。但是，对于初学者来说，我会通过注释掉/删除 .click() 处理程序中的所有 return false; 行来修改该插件，并查看修复了什么以及损坏了什么。

如果/如何解决，请告诉我。

【讨论】：

非常感谢您花时间帮助解决此问题。如果您在我的问题上查看 patrick 评论，您会发现他对插件有更深入的了解，无论如何问题都不会得到解决。无论如何，非常感谢！

【解决方案3】：

你可以使用

$("a.theLink");

如果您将事件绑定到这些链接，是的，如果页面在初始重新加载后获得新内容，则必须使用 live。

所以，你可以使用：

$("a.theLink").live("click", function(){
    alert("clicked!");
});

【讨论】：

【解决方案4】：

它们何时创建并不重要，“live”是完全不同的东西——它是事件处理/事件委托的工具，而不是选择器。

$('a.theLink') 或 $('ul.menu a.theLink') 或其他任何东西（取决于您是否要全局查看）都可以正常工作。

【讨论】：

【解决方案5】：

jQuery 将在运行时从页面上的任何内容中进行选择。因此，这取决于调用 jQuery 函数的方式/位置。

例如，如果您想在创建这些链接后引用它们，您只需使用 $('a.theLink') 或 $('ul.menu a.theLink') 等。

如果您想在这些元素被创建之前为其设置事件，那么您可以使用 live.也许像下面这样的东西会链接到当前的a.theLink's 和任何将在未来创建的a.theLink's。

$('a.theLink').live('click', function() {
  // Live handler called.
});

http://api.jquery.com/live/

【讨论】：