Question

我将onclicks附加到具有我想在事件发生时调用的函数的按钮上。在运行页面时，它会继续执行onclick功能而不需要单击。

window.onload=function(){
var recipeCount = 0;
//gets the recipes and puts them in the menu bar #left
//places them in buttons
$.getJSON('recipes.json', function(data) {
       $.each(data.recipe, function(i, f) {
       var yep = "</br> <button type='button' id = '" + f.number + "'>" + f.Name + "</button> </br>";
       $(yep).appendTo("#left");
       recipeCount = recipeCount + 1;


     });//for each recipe

   });//getJSON
//ends recipes to menu
for(var i = 1; i < recipeCount + 1; i++){
    $(i).onclick = clicked(i);
}
$("one").onclick = clicked("one");
};//on load

function clicked(idNum){
    $.getJSON('recipes.json', function(data) {
       $.each(data.recipe, function(i, f) {
       if(idNum == f.number){
        var rec = "</br> <h1> " + f.Name + "</h1> " ;
        $(rec).appendTo("#bigBox");

       }

     });//for each recipe

   });//getJSON
}//clicked

Answer 1

您直接调用clicked()函数并导致它运行，这就是原因。

正确的语法更像是：

$('#some-element').click(function(event) {
    // inside click event handler
});

换句话说，你会想要这样的东西：

$('#some-element').click(function(event) {
    clicked('one');
});

如果您正在寻找原始的JavaScript样式，那么我相信它会是：

$('#some-element')[0].onclick = functionName;

Answer 2

首先$("one")无效，如果一个是CSS类，则应为$(".one");如果一个是任何元素的ID，则为$("#one")。

其次你应该这样做。

$("#one").click(function(event) {
      clicked("one");
});

Answer 3

clicked(i)   executes the function.

您只需要将函数指针关联到它。

$(i).onclick = clicked(i);

应该是

$('#'+ i).on('click' , function() {
     clicked(i);
});

但这不会起作用，因为您似乎在GETjson中使用 i 的值。这是一个经典的闭包问题。

for(var i = 1; i < recipeCount + 1; i++){
    $('#'+ i).on('click' , function(num) {
        return function() {
                 clicked(num);
        }
    }(i)  
 );

}

Javascript onclick执行没有单击

3 个答案: