jQuery 在 keyup 事件监听器中点击事件监听器

Question

我有一个 keyup 事件侦听器，可以动态创建新按钮并将其添加到页面。然后该按钮需要另一个 click 事件监听器，它依赖于仅在 keyup 监听器中可用的数据来完成它的工作。

这是我的代码：

$('.select2-input').on('keyup', function(e) {
    var self = $(this);
    if (self.prev().text() != 'Uhr') {
        return;
    }

    if ($('.select2-no-results').is(':visible')) {
        if (!$('#insertWatch').length) {
            $($('<a href="javascript:;" id="insertWatch" class="btn btn-xs red" style="margin: 10px 0 0 10px;">Uhr Einfügen</a>')).insertAfter(this);
        }
    } else {
        $('#insertWatch').remove();
    }

    $(document).on('click', '#insertWatch', function(e) {
        alert('Added')
        $.post('/insert/watch', { name: self.val() }, function(response) {
            $('#supplier_id').prepend($('<option value="' + response + '" selected>' + self.val() + '</option>'));
            $('.select2-drop-mask, .select2-drop-active').css('display', 'none');
        });

        return false;
    });

    e.stopPropagation();
});

单击添加的按钮时，click 事件侦听器根本不会触发。我不知道为什么。所以总而言之，alert('Added') 永远不会弹出。

Answer 1

尝试在创建元素时附加 even。

类似于：

$('.select2-input').on('keyup', function(e) {
    var self = $(this);
    if (self.prev().text() != 'Uhr') {
        return;
    }

    if ($('.select2-no-results').is(':visible')) {
        if (!$('#insertWatch').length) {
            $($('<a href="javascript:;" id="insertWatch" class="btn btn-xs red" style="margin: 10px 0 0 10px;">Uhr Einfügen</a>')).insertAfter(this).on('click', '#insertWatch', function(e) {
        alert('Added')
        $.post('/insert/watch', { name: self.val() }, function(response) {
            $('#supplier_id').prepend($('<option value="' + response + '" selected>' + self.val() + '</option>'));
            $('.select2-drop-mask, .select2-drop-active').css('display', 'none');
        });

        return false;
    });;
        }
    } else {
        $('#insertWatch').remove();
    }



    e.stopPropagation();
});

Answer 2

这是您要找的吗？ http://jsfiddle.net/leojavier/cp34ybca/

$('.select2-input').on('keyup', function(e) {
    var button = "<button class='myButton'>my button</button>";

    if ($(this).val() != 'Uhr' && !$('.myButton').length) {
       $('body').append(button);
           $('.myButton').on('click', function(){
           $('i').html('Clicked!');
       });
    }else  if ($(this).val() === 'Uhr'){
        $('.myButton').remove();
        $('i').html('');
    }
});

jQuery 在 keyup 事件监听器中点击事件监听器

jQuery click event listener inside keyup event listener

javascript

jquery

events

event-handling

jquery-events