Question

上下文：我有一个单击事件处理程序，在单击某个特定选项卡时会激活该处理程序。现在在click事件处理程序中，我试图为该选项卡中的一个动态生成的元素添加另一个事件处理程序。

问题：是否可以从另一个处理程序中附加事件处理程序？例如，来自另一个点击处理程序的点击处理程序？

这是给我带来问题的代码......我似乎无法成功地将点击处理程序附加到动态生成的输入中。

    var main = function () {
    'use strict';


    var todos = [
        ...
    ];


    $('.tabs a span').toArray().forEach(function (element) {

        var $element = $(element),
            $content,
            $li,
            $button,
            add_note,
            input_value;


        $element.on('click', function () {

            ...

            $('main .content').empty();


            // 1st tab
            if ($element.parent().is(':nth-child(1)')) {

                ...

            // 2nd tab
            } else if ($element.parent().is(':nth-child(2)')) {

               ...

            // 3rd tab
            } else if ($element.parent().is(':nth-child(3)')) {

                // add DOM elements
                $button = $('<button>').text('+');
                $content = $('<input>').add($button);


                add_note = function () {

                    input_value = $('main .content input').val();

                    if (input_value !== '') {
                        todos.push(input_value);
                        $('main .content input').val('');
                    }
                };

                //
                //  attach keypress and click handlers
                //
                $('main .content input').on('keypress', function (event) {

                    // check for 'enter' keypress
                    if (event.keyCode === 13) {
                        add_note();
                    }             
                });

                $('main .content button').on('click', function (event) {
                    add_note();
                });
            }


            $('main .content').append($content);
            return false;
        });
    });

    ...
};

$(document).ready(main);

Answer 1

您可以在动态元素上取出事件绑定，并使用委托事件转换它们：

$('main').on('keypress', '.content input', function (event) {
    // check for 'enter' keypress
    if (event.keyCode === 13) {
        add_note();
    }             
}).on('click', '.content button', function (event) {
    add_note();
});

Answer 2

正如其他人所指出的那样，发布的代码不起作用，因为动态生成的元素还没有在dom中退出。但是，正如一些人在上面强调的那样，而不是使用委托事件处理程序。将处理程序直接附加到jQuery对象（而不是选择器）更简单。

所以以下方法可行： -

python -c "from twisted.words.protocols import irc"
Traceback (most recent call last):
  File "<string>", line 1, in <module>
ImportError: No module named words.protocols

jQuery：是否可以从另一个处理程序中附加事件处理程序？

2 个答案: