Question

I need to have a mousedown/up event effect an element that is bought into the page via .load.

I am using this, but I think I may have gotten it wrong:

$("#newBtn").live('mouseup', function(){
  $(this).css('box-shadow', '0px 7px 10px -5px #000');
}).mousedown(function(){
  $(this).css('box-shadow', '0px 7px 10px -5px #666');
});

Here is the load event:

$('#dashboard').click(function()
{
    $('#box').html(''); 
    $('#box').load('ajax/content.php #dashboard');
});
$('#calendar').click(function()
{
    $('#box').html(''); 
    $('#box').load('ajax/content.php #calendar');
});

These are two buttons one of which loads a div which contains #newBtn.

Any help would be appreciated!

I have also tried this:

    $("#dashboard").on('load', function(){
    $('#newBtn').mouseup(function()
    {
        $(this).css('box-shadow', '0px 7px 10px -5px #000');
    }).mousedown(function(){
        $(this).css('box-shadow', '0px 7px 10px -5px #666');
    });
 });

My thinking was that on loading the new div into my page the mouse down event would by armed. But no such luck 🙁

Answer 1

Ok,

I appreciate the help, but the on method was not working for me. I finally got it like this (using Engineer’s syntax with the live method):

   $('#newBtn').live('mouseup','#newBtn',function() {
        $(this).css('box-shadow', '0px 7px 10px -5px #000');
   }).live('mousedown','#newBtn',function() {
        $(this).css('box-shadow', '0px 7px 10px -5px #666');
   });

The only thing is, I don’t know why it worked so if anyone can explain THAT to me 🙂 that would be great!