0

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

Jeremythuff
  • 1,518
  • 2
  • 13
  • 35

1 Answers1

0

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!

Jeremythuff
  • 1,518
  • 2
  • 13
  • 35
  • Try my updated answer. I have changed '#dashboard' to '#box', as it seems ,that `#box` is not a child of `#dashboard`, which I was thinking before. – Engineer Jun 10 '12 at 17:12
  • Don't use `live`, it is deprecated. For more explanations, why your code works, see the docs-> http://api.jquery.com/live/ ,especially `.live( events, data, handler(eventObject) )` part. According to docs, you can simplify your code to `$('#newBtn').live('mouseup',function() { //... }).live('mousedown',function() { //... });`, because you are passing '#newBtn' data to handler, and that data is not used in handler/s. – Engineer Jun 10 '12 at 17:15