Multiple Jquery dialogs on page using same classes

Question

I have multiple places on my page where I want to open a jquery dialog boxes when a link is clicked. I am using class selectors so in theory I should be able to open each of them. My problem is that with the code I have it will only open the first dialog I click. Why is this???

    //modal help div
    $('.dialogbox').dialog({
                   modal:true,
                   autoOpen: false
                   });
    $(".modalhelp").click(function() {
$('.dialogbox').dialog('open')

});

The html:

<a class="modalhelp" href="javascript:void[0]"><img src="images/information.png" /></a>
<div class="dialogbox" style="display:none" title="Information">Hello</div>

<a class="modalhelp" href="javascript:void[0]"><img src="images/information.png" /></a>
<div class="dialogbox" style="display:none" title="Information">NO HELLO</div>

Nick Craver · Accepted Answer · 2010-07-24 15:46:15Z

3

In your .click() handler you need to reference the one you want relatively, like this:

$(".modalhelp").click(function() {
  $(this).next('.dialogbox').dialog('open');
});

Instead of opening all .dialogbox elements, we're only calling .dialog('open') on the very next sibling <div class="dialogbox"> by using .next(). If there may be elements in-between the clicked anchor and the .dialogbox then then this would change a bit, for example .nextAll('.dialogbox:first').

answered Jul 24, 2010 at 15:46

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Multiple Jquery dialogs on page using same classes

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related