jQuery Open Dialog From Added Script

Я создал очень простой пример моей проблемы. Таким образом, у меня есть кнопка (Добавить контекст), которая добавляет некоторые html к телу, на самом деле html здесь - кнопка (добавленный открыватель), которая должна открывать простой диалог jquery. Однако это не сработает, потому что на этом этапе готово DOM уже выполнено. Я добавил еще одну кнопку (Original Opener), которая выполняется до того, как DOM готов, и эта кнопка работает нормально. Мой вопрос, как я могу заставить кнопку Add Opener работать, чтобы открыть диалоговое окно после DOM?jQuery Open Dialog From Added Script

<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>

источник

2016-07-21 BehaminB

Использование для делегированного события для динамически добавленных элементов.

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

Я бы порекомендовал вам идти искать подобного рода вопросов (в StackOverflow), прежде чем отправлять вопрос. Anyways Пожалуйста, найдите его снова, чтобы вы знали, почему мы должны использовать делегированное событие.

источник

2016-07-21 21:17:34 bipen

jQuery Open Dialog From Added Script

ответ

Смежные вопросы