Firefox上的Jquery bug，但Chrome上没有

Question

我在点击该div时尝试在div的位置加载一个输入框，Jquery我在Chrome上使用得很好，但是当它来到Firefox时它会在1之后显示不同的结果，2和3次点击：

以下是我使用的Jquery：

$(function(){
  $('#right').on('click', '.stock.mini-counts', function(){
    var $p = $(this);
    var old = $p.html();

    if(/<input type="text"/.test(old))
      return;

    $p.html('<input type="text" value="' + old + '"/>')
       .find('input')
       .focus()
       .on('blur', function(){
         var value = this.value;
         $.post('listener_updates.php', {stock: value})
          .done(function(){
            $p.html(value);
          })
          .fail(function(){
            $p.html(old);
            alert('Could not update title');
          });
       });
  });
});

Html：

<div class="status"><div class="stock mini-counts">7</div><div>available</div></div>

感谢您的帮助

Answer 1

这是因为firefox在type属性之前添加了value属性，因此regexp不匹配。

尝试更改您的代码：

$(function () {
    $('#right').on('click', '.stock.mini-counts', function(){
        var $p = $(this);
        var old = $p.html();

        if (/<input /.test(old)) return;
        $p.html('<input type="text" value="' + old + '"/>')
            .find('input')
            .focus()
            .on('blur', function () {
            var value = this.value;
            $p.html(value);

        });
    });
});

演示：http://jsfiddle.net/IrvinDominin/aAAh8/

Answer 2

为什么要使用test()功能，只需用

替换它即可

if( $(this).find('input').length > 0 ) return false;

将阻止此类错误，并检查浏览器中是否存在输入。