jquery open only first button

Question

here is my code that open pop on window that name of class is like my input value. it works for my first part in html(PASS is first in my html ocde) but does not work for others. what is the problem?

                </div>
            </div>  
<!---------------- POLL BUTTON DIV(POP-UP)---------------------->
            <div id="modal"  class="poll">
                <div id="content">

                </div>
            </div>  
<!---------------- PASS BUTTON DIV(POP-UP)---------------------->
            <div id="modal"  class="pass">
                <div id="content">

                </div>
            </div>  
    <script type="text/javascript">
        $(document).ready(function() {
            $('#link').click(function(e) { // Button which will activate our modal
            var block = $(this +":input").val();
                $('.'+block).reveal({ // The item which will be opened with reveal
                    animation: 'fade',                   // fade, fadeAndPop, none
                    animationspeed: 600,                       // how fast animtions are
                    closeonbackgroundclick: true,              // if you click background will modal close?
                    dismissmodalclass: 'close'    // the class of a button or element that will close an open modal
                });
            return false;
            });
        });
    </script>

I'm not even sure how this is working as you are coercing a DOM element to a string and appending a jQuery psuedo selector to it...? Can you provide a working example of this in jsfiddle.net please. — Rory McCrossan
– Rory McCrossan, Commented Nov 23, 2013 at 12:39

Deryck · Accepted Answer · 2013-11-23 12:45:43Z

2

Switch your class and id attributes on these and then call the class in jQuery, not the ID.

ID will only be referenced one time when traversing the DOM. After that it stops searching.

Here is the correct way to structure with HTML:

        <div id="poll"  class="modal">
            <div class="content">
            </div>
        </div>  
        <div id="pass"  class="modal">
            <div class="content">
            </div>
        </div>

Also changed your <div id="content"> to <div class="content"> since you have more than one. To select one in particular, use:

$('#pass').find('.content')

as an example.

Here is what you'll use to call in jQuery:

$('.modal').click()

this will replace your $('#link').click()

answered Nov 23, 2013 at 12:45

Deryck

7,6662 gold badges27 silver badges44 bronze badges

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

Collectives™ on Stack Overflow

jquery open only first button

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related