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

【问题标题】：How to open one dialog- box from multiple buttons on the same html page如何从同一个 html 页面上的多个按钮打开一个对话框
【发布时间】：2014-09-11 10:47:50
【问题描述】：

带有 class="front" 的 Div 在 html 页面上被多次克隆，按钮嵌套 (class=poperbtn) 也被克隆，按钮用于打开对话框/弹出窗口 (class="poper") ，例如：如果我有 4 个 div -> class=front，这意味着 4 个按钮 -> class="poperbtn"，则每次单击其中一个按钮时，都必须弹出对话框，该怎么做？是否可以？这是一个代码示例。

//对话框-打开按钮

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

// 对话框的div

<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");
            });
        });
    });

**根据 cmets，我更改了按钮 - 没有唯一的 Id 类。

【问题讨论】：

Id 在 html 页面中应该是唯一的。可以重复上课。将您的按钮 ID 切换为类。
更好地使用 data- 属性作为 js 钩子 - 留下 class 用于：css 演示文稿
@topless - 好的，如果我将删除 Id 并使用类，我的下一步是什么？

标签： javascript jquery html css

【解决方案1】：

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

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

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

而不是

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

所以最终代码将如下所示：

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

您可以为所需的inputs 添加类（例如，.button）。那么代码可以简化为：
```
$(document).on("click", ".button", function() {
    $("#poper").dialog("open");
});
```

更新。使用inputs 类.poperbtn 将是

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

【讨论】：

看起来不错，但在 div[class=front] 内的完整代码中 -> 有更多输入。那么根据这个信息下一步该做什么呢？
@Damkulul 不客气。您可以忘记_btnToDialog 和已弃用的.live() :) this 指向function() 内单击的输入元素。

【解决方案2】：

您也可以看看这个JSBin 解决方案。有很多方法可以解决这个问题，这取决于您想要提供的期望行为以及代码库中已有内容的方式。

【讨论】：