Обновить DOM после добавления элемента

Почему оповещение не работает после добавления DOM? Должен показывать "бла бла" после нажатия на него.

<!doctype html>
<html>
<head>
<title>test</title>
<meta charset="UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('#main_body').append("<h1>Hello</h1><input id=\"but\" type=\"button\">Click");
    $( "#but" ).on( "click", function() {
        alert( "bla bla" );
    });    
});   
</script> 
</head>

<body id="main_body">    
</body>
</html>

РЕШИТЬ

Основная проблема была с этим:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

JQuery был слишком стар, я думаю

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

решенная проблема :)

Ответ 1

Для динамически добавленных элементов вам нужно делегировать события, использовать другую версию в jQuery on(), вы можете делегировать событие статическому родителю динамически добавленных элементов. В вашем случае вы можете использовать #main_body

$('#main_body').on( "click", "#but", function() {
    alert( "bla bla" );
});

Делегированные события имеют то преимущество, что они могут обрабатывать события из элементы потомков, которые будут добавлены в документ позже. От выбор элемента, который, как гарантируется, будет присутствовать во время делегированный обработчик событий, вы можете использовать делегированные события для избегать необходимости часто прикреплять и удалять обработчики событий, jQuery Docs

Ваш код работает здесь, поскольку он заключается в том, что вы добавляете динамический элемент перед связыванием события, но использование делегирования событий освободит вас от последовательность, которую вы используете для добавления динамических элементов.

Ответ 2

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

$(document).ready(function() {
    $('#main_body').append("<h1>Hello</h1><input id=\"but\" type=\"button\">Click");
    $('#main_body').on('click', '#but', function() {
        alert( "bla bla" );
    });
});

Событие делегирование позволяет нам присоединить одного прослушивателя событий к родительский элемент, который будет срабатывать для всех детей, соответствующих селектору, существуют ли эти дети сейчас или добавлены в будущем

Ответ 3

Используйте как это

<!doctype html>
<html>
<head>
<title>test</title>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>

    $(document).ready(function () {
        $('#main_body').append("<h1>Hello</h1><input id=\"but\" type=\"button\">Click");
        $(document).on("click", "#but", function () {
            alert("bla bla");
        });
    });

</script>
</head>
<body id="main_body">
</body>

Вы должны использовать делегирование событий для этого

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

Ответ 4

Вы должны работать

Скриншот

$(document).ready(function () {
    $('#main_body').append("<h1>Hello</h1><input id=\"but\" type=\"button\">Click");
    $("#but").on("click", function () { //element is in DOM now as it added in previous statement
        alert("bla bla");
    });
});