Jquery bug on firefox but not on Chrome

Question

I'm trying to load an input box at the place of a div when clicking on that div, the Jquery I'm using works fine on Chrome, but when coming to Firefox it shows different results after 1, 2 and 3 clicks :

Here is the Jquery I'm using :

$(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>

Thank you for your help

Answer 1

It's because firefox add the value attribute before the type attribute so your regexp not match.

Try change your code in:

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

        });
    });
});

Demo: http://jsfiddle.net/IrvinDominin/aAAh8/

Answer 2

Why use the test() function for that when you can just replace that with

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

which will prevent such errors and check if the input is present across browsers.