Simulating a click doesn't work… jQuery

Question

I am trying to simulate a click with jQuery if the class of a td is "nee". Somehow all options like trigger, and a document ready click won't work...

HTML:

<td align="center" class="one nee">
   <img class="img-swap" src="images/nee.png" alt="Aanwezigheid"/>
</td>

Trigger action:

    $(document).ready(function(){ 
          $('#some-id').trigger('click'); 
    });

The image that the HTML returns is a variable, standard value is "ja.png". But as soon as the item is set to no in the database, the image changes to nee.png. But when that is triggered, I want input fields to appear, the same way as they appear when I click ja.png to change to nee.png. which is with a fade in. separately it works. But I can;t get the click to be simulated.

image changing code:

        $(document).ready(function(){
          $(".img-swap").click("click", function() {
            if ($(this).attr("class") == "img-swap") {
              this.src = this.src.replace("ja","nee");
            } else {
              this.src = this.src.replace("nee","ja");
            }
            $(this).toggleClass("ja");
          });
         });

Code for fadein actions:

        $(document).ready(function(){       
            $(".nee").trigger("click");
            $("td.one").click("click", function(){
                
                if ($(this).parent().find("td.two, td.three").hasClass("toggled")){
                    $(this).parent().find("td.two").fadeOut(400);
                    $(this).parent().find("td.three").fadeOut(400);
                    $(this).parent().find("td.two").removeClass("toggled");
                    $(this).parent().find("td.three").removeClass("toggled");
                    
                } else {
                    
                    if ($(this).parent().find("td.three").hasClass("DoNotWant")){
                        $(this).parent().find("td.three").fadeOut(400);
                        $(this).parent().find("td.three").toggleClass("DoNotWant");
                    } else {
                        $(this).parent().find("td.three").fadeIn(400);
                        $(this).parent().find("td.three").toggleClass("toggled");
                    }
                    
                    $(this).parent().find("td.two").fadeIn(400);
                    $(this).parent().find("td.two").toggleClass("toggled");
                }                   
            });
            
            $("td.two").click("click", function(){
                
                if ($(this).parent().find("td.three").hasClass("toggled")){
                    $(this).parent().find("td.three").fadeOut(400);
                    $(this).parent().find("td.three").removeClass("toggled");
                    $(this).parent().find("td.three").toggleClass("DoNotWant");
                    
                } else { 
                    $(this).parent().find("td.three").fadeIn(400);
                    $(this).parent().find("td.three").toggleClass("toggled");
                    
                }
            });             
        });

Anyone that can help me?

Live example is here: http://bryan.limewebsolutions.nl/

Answer 1

.click() is a shortcut for .bind('click'), so you don't have to gave the event type (click) to the function.

Change your .click("click", function(){ into .click(function(){ and your trigger should work properly.

Answer 2

Instead of triggering a click, I'd say it would be easier to just store a reference to the callback-function, and then use that reference both as your click-event callback and then just call i separately as well, instead of triggering a click event. Something like this:

var callback = function(){  
    if ($(this).parent().find("td.two, td.three").hasClass("toggled")){
        $(this).parent().find("td.two").fadeOut(400);
        $(this).parent().find("td.three").fadeOut(400);
        $(this).parent().find("td.two").removeClass("toggled");
        $(this).parent().find("td.three").removeClass("toggled");

    } else {

        if ($(this).parent().find("td.three").hasClass("DoNotWant")){
            $(this).parent().find("td.three").fadeOut(400);
            $(this).parent().find("td.three").toggleClass("DoNotWant");
        } else {
            $(this).parent().find("td.three").fadeIn(400);
            $(this).parent().find("td.three").toggleClass("toggled");
        }

        $(this).parent().find("td.two").fadeIn(400);
        $(this).parent().find("td.two").toggleClass("toggled");
    }                   
};

// Bind the click event
$("td.one").click("click", callback);
$(function () {
   // Instead of triggering a click, just call the function
   callback();
});

In this example the callback for td.two has been left out for simplicity of the example

Side notes:

1. I believe there is a problem with your logic here, if you have more than one td that match your selector in the if-statement. In that case, the first element that matches will always be used when checking if it has class toggled. .hasClass() will evaluate the first element in the set of matched elements.

2. You can make your code more efficient by using less DOM-traversing. In the callback, save a reference to the parent in a variable, and use that variable instead of calling $(this).parent() every time.