3

我将 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
4

3 回答 3

2

您直接调用该clicked()函数并使其运行，这就是原因。

正确的语法更像是：

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

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

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

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

$('#some-element')[0].onclick = functionName;
于 2012-11-14T16:35:08.657 回答
1

第一个$("one")是无效的，$(".one")如果一个是 CSS 类或者$("#one")一个是任何元素的 ID，它应该是有效的。

其次，您应该这样做。

$("#one").click(function(event) {
      clicked("one");
});
于 2012-11-14T16:35:23.867 回答
0 
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)  
 );

}

于 2012-11-14T16:35:37.547 回答