How to open one dialog- box from multiple buttons on the same html page

Question

Div with class ="front" is clone more than once on a html page ,button nested (class=poperbtn) clone as well, the button use is to open dialog-box/pop up (class="poper"), for example : if I have 4 divs -> class=front which means 4 buttons -> class="poperbtn", everytime I click on one of these buttons the dialog-box must pop-up, how to do this? is it possible? here is a code example.

//Dialog - box open button

<div  class="front">
      <input type="button" class="poperbtn" value="push it!" />  </div>

// Div for Dialog box

<div id="poper"> <h1>here I am </h1></div>

//To avoid using id I select button (id=poperbtn) this way - works fine I got id="poperbtn" button .

var _btnToDialog = "";
        $(".front").live("click", function () {                    
            _btnToDialog = $(this).next().children().eq(0);           
        });

//Dialog box Jquery function - I am not sure about this code.. got stuck here..

$(function () {
            $("#poper").dialog({
                autoOpen: false,
                width: 650,
                height: 600,
            });
            $(_btnToDialog).click(function () {
                $("#poper").dialog("open");
            });
        });
    });

**According to comments,I changed the button - has no Id only class.

Id should be unique in a html page. Classes can be repeated. Switch your button id to class. — topless
– topless, Commented Sep 11, 2014 at 10:50
even better use data- attributes as js hooks - leave class for what's intended for: css presentation — Luca
– Luca, Commented Sep 11, 2014 at 10:51
@topless - ok If I will remove Id and use classes what is my next step ? — Damkulul
– Damkulul, Commented Sep 11, 2014 at 10:54

Regent · Accepted Answer · 2014-09-11 11:09:10Z

2

You can hang click handler for all input inside .front elements.
Due to dynamically created elements it should be, for example
```
$(document).on("click", "selector", function() {}) 
```

instead of

    $("selector").click(function() {})

So finally code will look like:

    $(document).on("click", ".front input", function() {
        $("#poper").dialog("open");
    });

You can add class (for example, .button) for required inputs. Then code can be simplified to:
```
$(document).on("click", ".button", function() {
    $("#poper").dialog("open");
});
```

Update. With inputs class .poperbtn it will be

$(document).on("click", ".poperbtn", function() {
    $("#poper").dialog("open");
});

edited Sep 11, 2014 at 11:09

answered Sep 11, 2014 at 10:56

Regent

5,1743 gold badges23 silver badges36 bronze badges

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

2 Comments

Damkulul Over a year ago

Well it looks nice but in the full code inside div[class=front] -> there are more inputs. So according to this info what to do next?

Regent Over a year ago

@Damkulul you're welcome. You can forget about _btnToDialog and about deprecated .live() aswell :) this points to clicked input's element inside function().

topless · Accepted Answer · 2014-09-11 11:07:39Z

0

You can also have a look at this JSBin solution. There are many ways you can approach this problem it depends on what the desired behavior is you want to provide and the way you have already things in your codebase.

answered Sep 11, 2014 at 11:07

topless

8,24112 gold badges61 silver badges87 bronze badges

Collectives™ on Stack Overflow

How to open one dialog- box from multiple buttons on the same html page

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related