Question

我创建了一个非常简单的问题示例。所以我有一个按钮（添加上下文），它将一些html添加到body，实际上这里的html是一个按钮（Added Opener），它应该打开一个简单的jquery对话框。但是它不起作用，因为此时DOM就绪已经执行。我添加了另一个按钮（原始打开程序），它在DOM准备好之前执行，该按钮工作正常。我的问题是，我如何使添加的开启按钮工作，以便它可以在DOM准备好后打开一个对话框？

<html>
    <head>
      <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
      <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
     <script>
      $( function() {
        $( "#dialog" ).dialog({
          autoOpen: false
        });

        $( "#opener" ).on( "click", function() {
          $( "#dialog" ).dialog( "open" );
        });

          $( "#ContextButton" ).on( "click", function() {
          $("body").prepend('<button id="opener">Added Opener</button>');
        });
      } );
      </script>
    </head>
    <body>
    <div id="dialog" title="Basic dialog">
      <p>This is a basic dialog</p>
    </div>
     <button id="opener">Original Opener</button> 
     <button id="ContextButton">Add context</button> 
   </body>
 </html>

Answer 1

在委托事件中使用动态添加的元素。

$('body').on("click", "#opener", function() {
     $( "#dialog" ).dialog( "open" );
});

我建议您在发布问题之前先搜索类似的问题（在stackoverflow中）。无论如何请再次搜索它，以便您知道我们为什么必须使用委托活动。

添加脚本的jQuery打开对话框

1 个答案: