javascript - 在具有相同 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

...many elements with same 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) {
    // ...
});

无需单独循环它们。

<小时/>

您可能会考虑的另一种方法是，您可能希望使用事件委托(delegate)，而不是 Hook 每个单独的“编辑”链接的单击。这样，您就可以将事件挂接到包含所有这些“编辑”链接的元素上(肯定会有一个合理的链接，body 始终可以作为最后的手段) )，但告诉 jQuery 不要通知您该事件，除非它在到达冒泡中的该元素的途中经过其中一个事件。看起来像这样:

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

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