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

Question

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

**根据评论，我更改了按钮 -​​ 没有仅 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");
  });