2

我在 Chrome 中发现了以下行为，而不是在 Firefox 中。

我有一个输入元素，它

  • 具有“更改”事件处理程序
  • 具有“keydown”事件处理程序，当用户键入退格键且元素内容为无时，该元素将被删除。
  • 并且这两个处理程序绑定到一些包装器元素，并且事件处理程序使用 jQuery.on 函数作为委托处理程序附加。

在 Chrome 中，如果我

1）点击输入框，在输入框中输入一些文字，然后聚焦。

  • 调用更改事件处理程序。

2) 点击输入框，输入退格键删除所有内容，再次输入删除该输入框。

  • 然后，尽管删除了目标输入 dom，但仍会调用更改事件处理程序！！

在 Firefox 中，当由于退格键而删除框时，不会调用更改事件处理程序。

是否仅在我的浏览器中？还是 jQuery 错误？或浏览器实现错误？

我在 jsfiddle 中编写了简化代码.. http://jsfiddle.net/RbAua/6/

4

1 回答 1

0

如果您使用bind()更改事件，它会按预期工作，

似乎与on()方法有关的错误，这为什么我不明白为什么上次都使用 .on() 即使是单个元素！

    http://jsfiddle.net/RbAua/9/

$('#wrap').on('keydown','#input',function(event){
    if(event.keyCode == 8){ // backspace
        if($(this).val().length == 0){
            $(this).remove();
            $('#txt').append('<div> removed! </div>');
            event.preventDefault();
        }
    }
});


$('#wrap #input').bind('change', function(){
    $('#txt').append('<div> changed! to [' + $(this).val() + '] </div>');
});

调试jquery，我发现如果事件已经用on（）或live（）应用了，那么元素没有缓存的事件数据，所以CleanData()不能按预期工作，在这种情况下更奇怪的是FF按预期开箱即用.

我找到了解决方法，想法是仅绑定到可见元素，因此在删除之前制作 hide() 将防止更改触发。

var onchange = function(e) {
    $('#txt').append('<div> changed! to [' + $(this).val() + '] </div>');
};

$('#wrap').on('keydown', '#input', function(event) {
    if (event.keyCode == 8) { // backspace
        if ($(this).val().length === 0) {
            var that = $(this);

            var onchange1 = onchange;
            that.hide();
            that.remove();
            $('#txt').append('<div> removed! </div>');
            event.preventDefault();
        }
    }
});



$('#wrap').on('change', '#input:visible', onchange);​

http://jsfiddle.net/RbAua/12/

于 2012-10-13T09:50:51.360 回答