Как выполнить функцию JavaScript из динамического HTML-результата? Jquery

Question

Пожалуйста, посмотрите на этот код -

Когда я нажимаю на myLink, я получаю модальное диалоговое окно, которое показывает HTML, как определено ниже. Этот HTML содержит кнопку (id = test_button), и когда я нажимаю на эту кнопку, я хочу сделать ajax-запрос. Но это не работает. Таким образом, чтобы проверить это, я просто делаю предупреждение, но оно также не будет работать.

Также будет возможно обновить существующие значения элемента dom (просто заполните форму) из функции щелчка test_button.

Спасибо за вашу помощь.

$('#myLink').click(function(event) {
    event.preventDefault();
    $('<div id="iContainer">Test: <input type="text" value="" id="test_text" /> 
        <input type="button" id="test_button" value="click" /></div>').appendTo('body');        
    $("#iContainer").dialog({                   
        width: 600,
        modal: true,
        close: function(event, ui) {
            $("#iContainer").remove();
            }
        });
    });
    $('#test_button').click(function() {
        alert('I am in Alert');
        //alert($('#test_text').val());
    });

Answer 1

Попробуйте с События / Live :

$('#test_button').live("click", function(){
  alert('test');
});

Answer 2

Проблема в том, что вы пытаетесь прикрепить обработчик щелчка до того, как элемент существует.

Как указано в CMS, вы можете использовать .live () или добавить обработчик кликов в функцию $ ('# myLink'). Click ()

Вот так:

$('#myLink').click(function(event) {
        event.preventDefault();
        $('<div id="iContainer">Test: <input type="text" value="" id="test_text" /> 
                <input type="button" id="test_button" value="click" /></div>').appendTo('body');                
        $("#iContainer").dialog({                                       
                width: 600,
                modal: true,
                close: function(event, ui) {
                        $("#iContainer").remove();
                        }
                });

        $('#test_button').click(function() {
                alert('I am in Alert');
                //alert($('#test_text').val());
        });
});