keyup事件监听器内的jQuery点击事件监听器答案

【问题标题】：jQuery click event listener inside keyup event listenerkeyup事件监听器内的jQuery点击事件监听器
【发布时间】：2015-10-01 19:10:19
【问题描述】：

我有一个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') 永远不会弹出。

【问题讨论】：

我can't reproduce the issue。您是否可以使用stack snippet 或jsfiddle 重新创建问题？
这真的很奇怪，因为它无法在我的平台上运行！
嗨中止，如果你使用<a href=javascript:void(0)>link</a>你不需要stopPropagation

标签： javascript jquery events event-handling jquery-events

【解决方案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();
});

【讨论】：

稍微解释一下会很有帮助。问题是什么？您的解决方案如何解决？

【解决方案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('');
    }
});

【讨论】：