在jQuery中全局定义函数

Question

I have some simple jQuery code, and it has a problem. The menu handler function doesn't work at all.

var clicked = false;
$(document).ready(function(){
    $TemplateMenu= $('<p class="paragraph">texxt</p>');
    $('.TemplateMaker').click();
        this.menuhandler();
    });
});
function menuhandler(){         
    if(clicked == false){
        $(this).after($TemplateMenu);
        clicked = true;
    }
    else{
        $TemplateMenu.remove();
        clicked = false;
}

For some reason, the function works if I put it directly inside click() like this:

    $('.TemplateMaker').click(function(){
        if(clicked == false){
            $(this).after($TemplateMenu);
            clicked = true;
        }
        else{
            $TemplateMenu.remove();
            clicked = false;
        }
    });
});

What is wrong with this code? Did I define the function wrong or do I need something special if the function contain jQuery elements? Thanks for the help :-)

Edit:

I edit the code to include your guys suggestions, its stile doesn't seem to work. code:

var clicked = false;
$(document).ready(function(){
    $TemplateMenu= $('<p class="paragraph">texxt</p><p class="p2">texxt</p>');
    $('.TemplateMaker').click(menuHandler($(this)));
});
function menuHandler(obj){         
    if(clicked == false){
        $(obj).after($TemplateMenu);
        clicked = true;
    }
    else{
        $TemplateMenu.remove();
        clicked = false;
}}

I notic now that the jquery throw this "event.returnValue is deprecated. Please use the standard event.preventDefault() instead. ", but I don't know how its contact to my script.

Answer 1

$('.TemplateMaker').click();
        this.menuhandler();
    });

Try replacing this.menuhandler(); with just menuhandler(); as shown below:

$('.TemplateMaker').click();
        menuhandler();
    });

Edit: In response to your comment. Try using this instead of $(this) in the menuhandler() of your original code.

Answer 2

You probably want the menuHandler function to fire when someone clicks on the button? Then you can simply change your code as follows:

$('.TemplateMaker').click(menuHandler);

Edit: You basically have two options:

Option1:

You don't have to pass $(this) change your code to this (make sure you remove the parameter in the menuHandler function if you choose this approach):

$(document).ready(function(){
    $TemplateMenu= $('<p class="paragraph">texxt</p><p class="p2">texxt</p>');
    $('.TemplateMaker').click(menuHandler);
});

Option2:

Or if you want to pass $(this) you can do something like this (keep the parameter in the menuHandler function if you choose this approach):

$(document).ready(function(){
    $TemplateMenu= $('<p class="paragraph">texxt</p><p class="p2">texxt</p>');
    $('.TemplateMaker').click(function() {
       menuHandler($(this));
    });
});