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

发布于 2024-09-18 11:20:57 字数 994 浏览 5 评论 0原文

我有这样的标记:

<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 插件创建,所以我认为我需要使用“live” ' jquery 的特性。

感谢您帮助

编辑: @大家都回答了 请查看这篇帖子

基本上,我试图将点击事件附加到该帖子中具有“contactRole”类的锚点。该锚点是由插件修改的。如果您想更好地了解真正需要什么,请阅读所有评论。

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

谢谢!

I have this markup:

<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>

I would like to select all the elements "a" with class "theLink".

Please note that the "helper" div as well as the "menu-container" div are created at runtime, after clicking on an anchor, by another jQuery plugin so I think I need to use the 'live' feature of jquery.

Thanks for helping

EDIT:
@everybody answered
Please, have a look a this post.

Basically I am trying to attach a click event to the anchor that have "contactRole" class in that post. That anchors are modified by a plugin. If you want to have a good understanding of what is really needed please read all the comments.

Note that I have simplified the markup here: what is class="theLink" here is class="contactRole" in yesterday post.

Thanks!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

山田美奈子 2024-09-25 11:20:57

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

$(a.theLink);

将获取 a 类型的所有元素,以及类 theLink

No need to use .live(), that is for attaching events automatically to newly created elements.

$(a.theLink);

Will get you all of the elements of type a, with the class theLink.

晨曦÷微暖 2024-09-25 11:20:57

如果您只想选择它们,所有发布的解决方案都可以完美运行,但如果您确实想在单击它们时执行某些操作,请尝试以下操作:

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

更新

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

为您的问题提供明确的答案很困难,主要是因为这需要我知道该插件真的很好,但我显然不知道。然而,对于初学者来说,我会通过注释掉/删除 .click() 处理程序中的所有 return false; 行来修改该插件,并查看哪些内容得到修复,哪些内容被破坏。

请告诉我这是否/如何进行。

If you only want to select them, all the posted solutions will work perfectly, but if you actually want to do stuff when they're being clicked, try this:

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

UPDATE

I speed-read the plugin source code and I saw that a bunch of .click() handlers do a return false (lines 28, 211, 304, etc). I am fairly new to the use of the .live() function, but from what I understand, and as somebody actually pointed already in a comment to your other question, .live() will NOT work on an element that already has a .click() handler which returns false. In the case of this particular plugin, I THINK that return false;is used for preventing repetitive behaviour, like re-opening the menu if is already open, but I could be way off.

Giving you a definitive answer to your problem is hard, mostly because it would require me to know that plug-in really good, which I obviously do not. However, for starters I would modify that plugin by commenting out/removing all the return false; lines from .click() handlers and see what gets fixed and what gets broken.

Please let me know if/how this works out.

嘦怹 2024-09-25 11:20:57

您可以使用

$("a.theLink");

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

所以,你可以使用:

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

You can use

$("a.theLink");

And if you are binding a event to these links, yes you must use live if page get new content after initial reload.

So, you can use:

$("a.theLink").live("click", function(){
    alert("clicked!");
});
兔小萌 2024-09-25 11:20:57

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

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

It doesn't matter when they're created, and "live" is something completely different -- it's a tool for event handling / event delegation, not selectors.

$('a.theLink') or $('ul.menu a.theLink') or whatever (depending on whether you want to look globally) will work just fine.

唱一曲作罢 2024-09-25 11:20:57

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/

jQuery will select from whatever is on the page at the time it runs. So it depends on how/where the jQuery function will be called.

For example, if you wanted to reference these links after they have been created, you would just use $('a.theLink') or $('ul.menu a.theLink') or etc.

If you wanted to set events to these elements before they are even created, then you would use live. Maybe something like below which would link up to the current a.theLink's and any a.theLink's that will be created in the future.

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

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文