Why is this code running before the 'click' event?

Question

Hello,

I have what seems to be a simple issue. I have a jquery function that's running on page load, despite the fact that I specifically set it to run after the 'click' event on a specific element.

This is the function:

    $('#boxShow').click(function() {
      $('#colorBox').animate({
        height: 'toggle'
      }, 400, function() {
        // Code that will run after the click
      });
    });

Is there a way to prevent this code from running before the 'click' event? Thanks!

EDIT:

The full jquery code:

$(document).ready(function() {  

    $("#accordion").accordion({
        event: "click"
    });

    $("#TagsSelectBox").multiSelect({ 
        minWidth:130,
        selectedList:5,
        showHeader:false
    });

    $('#boxShow').click(function() {
        $('#colorBox').animate({
        height: 'toggle'
        }, 400, function() {
            // Animation complete.
        });
    });

    $('#test').colorPicker({            
        defaultColor: 0, // index of the default color (optional)
        columns: 13,     // number of columns (optional)  
        click:function(c){
        $('#boxShow').css("background-color",c);
      } 
    });
});

EDIT: Just in case anyone wants to know, here's the final version after making a few adjustments to make it generic enough for multiple 'color-pickable' items:

Final Version

If you want to try it out yourselves, you can download the color picker plugin from the syronex site. The link is in the comments!

Thanks to everyone who helped me achieve this!

Answer 1

Guessing that you mean that the query is not getting any elements, and therefore not working.

You need to put it inside a document ready handler to call it after the document loads.

$(document).ready(function(){
    $('#boxShow').click(function() {
      $('#colorBox').animate({
        height: 'toggle'
      }, 400, function() {
        // Code that will run after the click
      });
    });
});

Answer 2

If I had to guess I'm not sure of what your colorpicker plugin is, so I would say try commenting out the lines that say click on that control, because it might initiate a click to that control

$('#test').colorPicker({             
    defaultColor: 0, // index of the default color (optional) 
    columns: 13,     // number of columns (optional)   
    //click:function(c){ 
    //$('#boxShow').css("background-color",c); 
  //}  
}); 

Since it seems as if all your tags are divs, try changing the click event function to this

$('div').click(function(e) { 
  var $target = $(e.target); 

  if ($target.is('#boxShow')) { 
       $('#colorBox').animate({ 
        height: 'toggle' 
        }, 400, function() { 
        // Code that will run after the click 
      }); 

  } else { 
    // do actions for a click anywhere else inside div
    e.preventDefault(); 
  } 
}); 

If that works then something else is wrong with your code that you have posted.