jQuery的点击事件不触发按钮动作

Question

I am using JQuery and I have loaded a bunch of Javascript for a web page which works as expected. However when I try to add the following code to trigger a button click, the button is not activated.

$(document).ready(function(){
    $('.add_link').click();
});

I am wondering what I am doing wrong? I have this bit of code in a separate file that gets loaded after all the other javascript files are loaded. Any hints?

Thanks.

Answer 1

$('.add_link').click();

Maybe the button is not found, because it does not have the specified class. Look for typos or maybe you just forgot to set the class for the button?

What should happen, when you click the button?

What is the html code for this?

Answer 2

I have found the answer after playing around some more. Since I am using Drupal, I need to use a closure to make sure it works correctly. The correct code should be:

jQuery(document).ready(function($){
   $('.add_link').click();
});

It is always the small things that trip you up. Thanks for all the responses.

Answer 3

HTML :

<button class="add_link">Click ME</button>

Javascript :

$(document).ready(function(){
    $('.add_link').click(function(event){
        //I'm the event handler
        console.log(event);
        alert(".add_link clicked!!!");
    });
});

Other examples :

$(document).ready(function(){
    //Named function
    function myHandle(event){
        //I'm the event handler
        console.log(event);
        alert(".add_link clicked!!!");
    }

    //adding event with event alias
    $(".add_link").click(myHandle);

    //adding event with jQuery.on
    $(".add_link").on("click", myHandle);

    //adding event with jQuery.on and delegation
    $("body").on("click", ".add_link", myHandle);

});

I use jQuery.on because syntax of delegation and simple event handling is almost the same. jQuery.on is newer then jQuery.bind , jQuery.live and jQuery.delegate too.

jsFiddle