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

Question

类为“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>

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

//Dialog box Jquery function - 我不确定这段代码..卡在这里..

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

**根据评论，我更改了按钮 -​​ 没有只有 Id 的类。

Answer 1

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

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

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

代替

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

所以最后的代码看起来像:

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

• 您可以为所需的输入 添加类(例如，.button)。那么代码可以简化为:

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

• 更新。使用 input 类 .poperbtn 它将是

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