left click + hold = add checkbox

Question

html

  <button>a</button>
  <div class="headerer">
     <p>visit <a href="http://reigel-codes.co.cc"&gt;reigel-codes.co.cc&lt;/a&gt;&lt;/p&gt;
  </div>

problem

how can I add checkbox after <button> by pressing and hold left click ?.. then stop adding when left click is release...

I have tried so far,

$(document).ready(function(){
   $('button').mousedown(function(){
    $(this).after('<input type="checkbox">')
  });
})

Answer 1

Try this:

$(document).ready(function(){
   var checkInterval;
   $('button').mousedown(function(){
     var me=this;                              // store 'this' button
     checkInterval=setInterval(function() {
       $(me).after('<input type="checkbox">'); // add checkbox after button...
     }, 200);                                  // ...every 200ms on mousedown
   }).bind('mouseup mouseleave', function() {  // bind on mouseup or mouseleave
     clearInterval(checkInterval);             // stop adding checkboxes
   });
});

Answer 2

mousedown doesn't have an automatic repeat, but you could create one via setInterval and then turn it off on mouseup via clearInterval. E.g.:

$(document).ready(function(){
    var addHandle, addTarget;

    addHandle = 0;

    $('button')
        .mousedown(function(){
            if (!addHandle) {
                addTarget = $(this);
                addHandle = setInterval(doTheAdd, 250); // Or whatever interval you want
            }
        })
        .bind('mouseup mouseleave', (function(){
            if (addHandle) {
                clearInterval(addHandle);
                addHandle = 0;
                addTarget = undefined;
            }
        });

    function doTheAdd() {
        if (addTarget) {
            addTarget.after('<input type="checkbox">');
        }
    }
});

Be sure to test your target browsers, I wouldn't be 100% certain some of them don't eat mousedown and mouseup on buttons.

Edit Shout out to jAndy for the point about mouseleave, edited the above to use it.

Answer 3

This is just T.J. Crowders answer compressed:

$(document).ready(function(){
  $('button').mousedown(function(e){
    $(this).data('handle', setInterval($.proxy(function(){
      $(this).after('<input type="checkbox" id="cb' + e.target.id + '">')
    }, this), 50));
  }).mouseup(function(e){
    clearInterval($(this).data('handle'));
  });    
});​​

It has the same problem that, pressing the button and leaving it will keep the Interval alive, so you have to track that down also.