在具有相同ID的许多元素上运行相同的JQuery函数

Question

我相信这将很简单，我希望是这样。 经过几天的努力，我终于解决了我的最后一个问题，谢谢你在这里的人，但是现在我遇到了一个新问题。 我正在动态创建数百个博客。 我正在使用JQuery将编辑器加载到像这样的简单模式窗口中

<a class="blog_btns" id="edit" data-id="$b_blog_id" href="">Edit</a>

然后是JQuery

jQuery(function($) {
    var contact = {
        message: null,
        init: function() {
            $('#edit').each(function() {
                $(this).click(function(e) {
                    e.preventDefault();
                    // load the contact form using ajax
                    var blogid = $(this).data('id');
                    $.get("../_Includes/edit.php?blogid=" + blogid, function(data) {
                        // create a modal dialog with the data
                        $(data).modal({
                            closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
                            position: ["15%", ],
                            overlayId: 'contact-overlay',
                            containerId: 'contact-container',
                            onOpen: contact.open,
                            onShow: contact.show,
                            onClose: contact.close
                        });
                    });
                });
            });
        },
        open: function(dialog) {
            dialog.overlay.fadeIn(200, function() {
                dialog.container.fadeIn(200, function() {
                    dialog.data.fadeIn(200, function() {
                        $('#contact-container').animate({
                            height: h
                        }, function() {
                            $('#contact-container form').fadeIn(200, function() {
                            });
                        });
                    });
                });
            });
        },
        show: function(dialog) {
            //to be filled in later
        },
        close: function(dialog) {
            dialog.overlay.fadeOut(200, function() {
                $.modal.close();
            });
        },
    };
    contact.init();
});

我的问题是我有数百个

<a class="blog_btns" id="edit" data-id="$b_blog_id" href="">Edit</a>

但我希望所有人都运行上面的相同jQuery函数。

有人可以帮忙吗？ 有一个简单的方法吗？

Answer 1

...许多具有相同ID的元素...

这就是问题所在，您不能有多个具有相同id元素。

您可能要使用一个类：

<a class="blog_btns edit" data-id="$b_blog_id" href="">Edit</a>
<!-- Added ---------^                                       -->

然后：

$('.edit').each(...);
// ^---- ., not #, for class

---

但是您可能不想使用each ，只需执行以下操作：

$('.edit').click(function(e) {
    // ...
});

无需单独遍历它们。

---

您可能考虑的另一种方法是，您可能想使用事件委托，而不是单击每个“编辑”链接。 这样，您就可以将事件挂接到包含所有这些“编辑”链接的元素上（一定是一个合理的链接，最后一招总是可以使用body ），但是告诉jQuery除非事件通知您，否则不要将其通知您在冒泡中通过了其中之一到达该元素。 看起来像这样：

$("selector for the container").on("click", ".edit", function(e) {
    // ...
});

在处理程序中， this仍将是“编辑”链接。

Answer 2

按照HTML标准，使用类而不是id，每个元素应具有唯一的id。

id ：此属性为元素分配名称。 此名称在文档中必须唯一。

class ：此属性为一个元素分配一个类名或一组类名。 可以为任意数量的元素分配相同的一个或多个类名。 多个类名称必须由空格字符分隔。

http://www.w3.org/TR/html401/struct/global.html

所以用class代替id

<a class="blog_btns edit" data-id="$b_blog_id" href="">Edit</a>

并用$('.edit')引用它