CODEWITHSUNDEEP
javascriptjquery
Benjio
Benjio

Reputation: 73

Running same JQuery function on many elements with same id

I'm sure this is going to be simple well i hope it is. After racking my brain for days I have finally sorted my last problem thanks you someone on here, But now I have a new problem. I am dynamically creating blogs hundreds of them. I'm using JQuery to load a editor into a simple modal window like so 

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

then the 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();
});

the problem I have is i have hundreds of

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

but I want the all to run the same jQuery function above.

Can anyone help? Is there a simple way of doing this?

Upvotes: 0

Views: 447

Answers (2)

Sully
Sully

Reputation: 14943

Use class instead of id as according to HTML standards each element should have a unique id.

id: This attribute assigns a name to an element. This name must be unique in a document.

class: This attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or names. Multiple class names must be separated by white space characters.

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

so use class instead of id 

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

and refer to it with $('.edit')

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1074118

...many elements with same id...

That's the problem, you can't have multiple elements with the same id.

You probably want to use a class:

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

Then:

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

But you probably don't want to use each, just do:

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

There's no need to loop through them individually.

Another approach you might consider is rather than hooking click on each individual "edit" link, you might want to use event delegation. With that, you hook the event on an element that contains all of these "edit" links (there's bound to be a reasonable one, body is always possible as a last resort), but tell jQuery not to notify you of the event unless it passed through one of these on its way to that element in the bubbling. That looks like this:

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

Within the handler, this will still be the "edit" link.

Upvotes: 3

Related Questions