ループ外のイベント

Question

私は、クリックすると2つのボタンを作成する機能を持っています。

$(document).ready(function() { 
    $('#Refresh').on('click', basket()); 

    function basket(){ 
     var duplicate = document.createElement('button'); 

     // Write the text for button 
     var duplicate_text = document.createTextNode("Duplicate"); 
     duplicate.appendChild(duplicate_text); 

     $(document.body).append(duplicate); 

     // Create display button 
     var display = document.createElement('button'); 

     // Write the text for button 
     var display_text = document.createTextNode("Display"); 
     display.appendChild(display_text); 

     $(document.body).append(display); 

    } 

    }); 

バスケット機能全体が.on機能の内側にある場合は機能しました。しかし、私が上記のようにそれを取り出したとき、それは動作を停止しました。

ここで問題は何ですか？それは私の帰りの不足についてですか？

Answer 1

あなたはclick方法では、途中でbasket()を呼び出している

$(document).ready(function() { 
 
    $('#Refresh').on('click', basket); 
 

 
    function basket(){ 
 
     var duplicate = document.createElement('button'); 
 

 
     // Write the text for button 
 
     var duplicate_text = document.createTextNode("Duplicate"); 
 
     duplicate.appendChild(duplicate_text); 
 

 
     $(document.body).append(duplicate); 
 

 
     // Create display button 
 
     var display = document.createElement('button'); 
 

 
     // Write the text for button 
 
     var display_text = document.createTextNode("Display"); 
 
     display.appendChild(display_text); 
 

 
     $(document.body).append(display); 
 

 
} 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="button" id="Refresh" value="Refresh"/>

Answer 2

下に示すように、あなたは機能を返すことができます。 basketを呼び出さないでください：

$('#Refresh').on('click', basket); 
// Note basket has no parens, because we are not calling it.