Добавить обработчик событий к элементу, который еще не существует с помощью функции on()?

Я хочу добавить дескриптор события в элемент, который будет создан позже в DOM.

В основном, я пытаюсь сделать так, что, когда я нажимаю p#one, будет создан новый элемент p#two, затем я нажимаю p#two, скажу мне, что "p # два" щелкнул. Однако это не сработает, я не получил результат console.log "p # two clicked" после нажатия кнопки p#two.

Я использую on(), чтобы добавить событие click к p#two. Что я делаю неправильно?

Спасибо.

Ниже приведен мой пример кода:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>on() test</title>
  <link type="text/css" href="#" onclick="location.href='http://localhost/jquery-ui-1.8.20.custom/css/smoothness/jquery-ui-1.8.20.custom.css'; return false;" rel="stylesheet" />
  <script type="text/javascript" src="http://localhost/jquery-ui-1.8.20.custom/js/jquery-1.7.2.min.js"></script>
  <script type="text/javascript" src="http://localhost/jquery-ui-1.8.20.custom/js/jquery-ui-1.8.20.custom.min.js"></script>

  <script type="text/javascript">
    $(document).ready(function() {

        $('p#two').on('click', function() {
            console.log('p#two clicked');
        });


        $('p#one').click(function() {
            console.log('p#one clicked');
            $('<p id="two">two</p>').insertAfter('p#one');
        });

    }); // end doc ready
  </script>
</head>

<body>
    <p id="one">one</p>
</body>
</html>

Ответ 1

$('body').on('click','p#two', function() {
    console.log('p#two clicked');
});

вы также можете использовать

$(document).on('click', 'p#two', function() {

});

Подробнее о .on()

вы также можете использовать .delegate()

$('body').delegate('#two', 'click', function() {

});

Ответ 2

Вы можете привязать $.on к родительскому элементу, который всегда будет существовать в dom таким образом.

$(document).on('click','p#two', function() {
            console.log('p#two clicked');
        });

Обратите внимание: вы можете заменить document на любой родительский элемент, который всегда будет существовать в dom, и чем ближе родитель, тем лучше.

Проверить документ $. on

Live обесценивается. вместо этого используйте $.on. Эквивалентный синтаксис $.on для $.live и $.delegate

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(document).on(events, selector, data, handler);        // jQuery 1.7+

Я предлагаю вам использовать $.on для всех целей обработки событий, поскольку все другие методы маршрутизируются методом $.on под капотом.

Проверьте определение этих функций из источника jQuery v.1.7.2

bind: function( types, data, fn ) {
    return this.on( types, null, data, fn );
},
unbind: function( types, fn ) {
    return this.off( types, null, fn );
},

live: function( types, data, fn ) {
    jQuery( this.context ).on( types, this.selector, data, fn );
    return this;
},
die: function( types, fn ) {
    jQuery( this.context ).off( types, this.selector || "**", fn );
    return this;
},

delegate: function( selector, types, data, fn ) {
    return this.on( types, selector, data, fn );
},
undelegate: function( selector, types, fn ) {
    // ( namespace ) or ( selector, types [, fn] )
    return arguments.length == 1? this.off( selector, "**" ) : this.off( types, selector, fn );
}

Вы можете видеть, что все методы используют сами $.on и $.off. Поэтому, используя $.on, вы можете, по крайней мере, сохранить вызов функции, хотя это не является значительным большинством случаев.

Ответ 3

Вы хотите использовать Jquery.on

$('body').on('click','p#two', function() {
        console.log('p#two clicked');
    });