Question

div with class =“front”在html页面上克隆不止一次，按钮嵌套（class = poperbtn）克隆，按钮用法是打开对话框/弹出窗口（class =“poper”），例如：如果我有4个div - ＆gt; class = front表示4个按钮 - ＆gt; class =“poperbtn”，每当我点击其中一个按钮时，对话框必须弹出，怎么做？可能吗？这是一个代码示例。

//对话框 - 框打开按钮

<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>

//为了避免使用id我选择按钮（id = poperbtn）这样 - 工作正常我得到id =“poperbtn”按钮。

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

//对话框Jquery函数 - 我不确定这段代码..卡在这里..

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

**根据评论，我改变了按钮 - 没有Id的课程。

Answer 1

您可以为input元素内的所有.front挂起点击处理程序。

由于动态创建的元素应该是，例如

$(document).on("click", "selector", function() {})

而不是

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

所以最后代码看起来像：

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

您可以为所需的.button添加课程（例如input）。然后代码可以简化为：
```
$(document).on("click", ".button", function() {
    $("#poper").dialog("open");
});
```

<强>更新即可。使用input的类.poperbtn，它将是

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

Answer 2

您还可以查看此JSBin解决方案。您可以通过多种方式解决此问题，具体取决于您希望提供的行为以及代码库中已有的内容。

如何从同一个html页面上的多个按钮打开一个对话框

2 个答案: