如何克服函數中的嵌套？

我很新的JavaScript和jQuery，並遇到了一個問題，我還沒有找到解決方案。我會嘗試以相當簡單的方式繪製它。如何克服函數中的嵌套？

我有一個頁面爲用戶提供了一些選擇（它的遊戲，所以..）如攻擊或防守，使用什麼武器。然後它加載兩個html，每個都有一個「提交」按鈕。提交按鈕綁定到（分開的）將數據傳遞給ajax的函數。

我遇到的問題是我埋在嵌套函數中。那有意義嗎？我的代碼看起來是這樣的：

代碼：

$(function() { 
    $('#choice1').click(function() { 
     //do some stuff 
    }); 
    $('#choice2').click(function() { 
     //do some stuff 
    }); 
    $('#choice3').click(function() { 
     //do some stuff, including creating the choices below, and their submit boxes 
     $('#subChoice1').click(function() { 
       //send data with ajax to a php document. get result 
       //create some text on my document to display results 
       //create an input button, along with an id="subButton1" 
     }); 
     $('#subChoice2').click(function() { 
       //send data with ajax to a php document. get result 
       //create some text on my document to display results 
       //create an input button, along with id="subButton1" 
       //(yes, feed both back to same func) 
     }); 
    }); // end choice3 
    $('#subButton1').click(function() { 
       //my buttons in the subChoices do not call this function(!!??) 
    }); 
});

編輯：鏈接不再起作用，對不起。而且我創建了living example here.

感謝您的任何提示或指示。我幾乎可以肯定，只是有一件簡單的事情，我錯過了或沒有意識到這會讓我走上正軌。

來源

2011-04-15 jeremy

爲什麼你有你的點擊綁定嵌套？ – Headshota 2011-04-15 21:22:11

，因爲我不知道更好的方法來做到這一點。我正在學習。 – jeremy 2011-04-15 21:37:59

你總是可以使用正常的命名函數，而不是內聯的匿名函數。如果功能高峯越來越高，這可能會有所幫助。

更新：

這是你的工作案例1：

$('#button1').click(function(){ 
     $('#div1').append('<span id="span1"><br>Alright. Button 1 worked. Here\'s another button.</br></span>'); 
     $('#div1').append('<input type="button" value = "Button 2" id="button2"/>') 

     $('#button2').click(function() { 
      $('#div1').append('<span id="span1"><br>Hey! Button 2 worked!. Let\'s keep going.</br></span>'); 
      $('#div1').append('<input type="button" value = "Button 3" id="button3"/>') 

       $('#button3').click(function() { 
        $('#div1').append('<span id="span1"><br>Hey! Button 3 worked!. That\'s probably enough.</br></span>'); 

       }); 
     }); 

    });

什麼我建議是這樣來更新它：

function button3_click() { 
     $('#div1').append('<span id="span1"><br>Hey! Button 3 worked!. That\'s probably enough.</br></span>'); 
    } 

    function button2_click() { 
     $('#div1').append('<span id="span1"><br>Hey! Button 2 worked!. Let\'s keep going.</br></span>'); 
     $('#div1').append('<input type="button" value = "Button 3" id="button3"/>'); 
     $('#button3').click(button3_click); 
    } 

    function button1_click() { 
     $('#div1').append('<span id="span1"><br>Alright. Button 1 worked. Here\'s another button.</br></span>'); 
     $('#div1').append('<input type="button" value = "Button 2" id="button2"/>') 
     $('#button2').click(button2_click); 
    } 

    $('#button1').click(button1_click);

這樣的結構邏輯保持不變，但可以抽出嵌套的函數定義。

來源

2011-04-15 21:19:28 recursive

感謝您的回覆。這似乎是正確的路要走，但我不知道如何在jquery中執行它。查看這裏的代碼：http://www.dixieandtheninjas.net/hunter/dev/test.js（案例1有內聯匿名函數，工作得很好。案例2類似，但函數不是內聯的，因此創建的按鈕無法引用這些函數） – jeremy 2011-04-15 21:38:48

@Jeremy：這些函數仍然是內聯的。查看我的示例，瞭解我命名函數的含義。 – recursive 2011-04-15 21:44:02

非常感謝，我會給這個鏡頭！ – jeremy 2011-04-15 21:47:40

如果您一直重複使用提交按鈕的類或標識符，您可以利用jQuery的live()方法。它將允許您爲父項選擇的點擊處理程序以外的位置創建$('#subChoice1')和$('#subChoice2')的綁定，但仍然可以在創建它們時正確綁定它們。

來源

2011-04-15 21:21:22

如何克服函數中的嵌套？

回答

相關問題