jQuery keyup事件监听器中的click事件监听器

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添加的按钮时， click事件侦听器根本不会触发。 我不知道为什么。 因此，总而言之， alert('Added')不会弹出。

Answer 1

创建元素后，尝试附加偶数。

就像是：

$('.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('');
    }
});