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

尝试在创建元素时附加偶数。

类似的东西：

$('.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事件listerner中单击事件监听器

2 个答案: