jquery：如何将事件处理程序添加到对话框小部件内的按钮

Question

有没有一种方法可以将事件添加到 jqueryui 对话框小部件内动态创建的按钮？

tmp7 += " <div class='box' style='border:1px solid ;padding: 5px; margin: 5px'>";
tmp7 += "<input type='button' name='btnedit' class='editbtn' value='Edit' id='btnedit'> ";
tmp7 += " <input type='button' name='btndelete' value='Delete' id='btndelete''> ";
tmp7 += "</div>";

var newDiv = $(document.createElement('div')); 
                $(newDiv).html(tmp7);
                $(newDiv).dialog({
                 //add button events here. 
                });

Answer 1

考虑以下示例。

$(function() {
  $("button").click(function() {
    var fs = {
      name: "document.txt"
    };
    var newDiv = $("<div>", {
      title: "Action Options"
    }).html("Please select an action for " + fs.name).dialog({
      buttons: [{
        text: "Edit",
        click: function() {
          //editFile(fs);
          $(this).dialog("close");
        }
      }, {
        text: "Delete",
        click: function() {
          //deleteFile(fs);
          $(this).dialog("close");
        }
      }, {
        text: "Cancel",
        click: function() {
          $(this).dialog("close");
        }
      }]
    });
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<button>Action</button>

类似示例：https://jqueryui.com/dialog/#modal-confirmation

您已经创建了将出现在对话框内容中的元素。如果您愿意，您仍然可以将 click 事件绑定到这些元素。就个人而言，我会使用对话框中的按钮。

jquery：如何将事件处理程序添加到对话框小部件内的按钮

jquery: How to add an event handler to a button inside a dialog widget

jquery-ui