動的に生成された入力に対してonclick関数が定義されていません

Question

なぜ以下のコードが私にとってうまくいかないのでしょうか。

私がしたいことは、入力フィールドがクリックされたときにコンソールに何かを印刷することです。

"Click me"ボタンをクリックして入力フィールドを生成しています。各入力にはonclickという属性があり、onclick="popup()"のようになります。

誰かが私がしようとしていることがうまくいかない理由を説明することができますか？

$(document).ready(function(){ 
 
     
 
    function popup(){    
 
     \t console.log("clicked");    
 
    } \t 
 
     
 
    $('#btn').on('click', function() { 
 
     $('body').append('<input type="aText" id="inputField" onclick="popup()">'); 
 
    }); \t \t    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
    
 
<button type="button" id="btn">Click Me!</button> 
 
    
 
<div id = "range-calendar"></div>

Answer 1

$(document).ready(function()から外側にpopup()関数を宣言。

なぜですか？

その外側を持つグローバル.soの場所でのみ$(document).ready(function()機能に定義されていませんそのコールグローバルpopup()

$(document).ready(function() { 
 
    $('#btn').on('click', function() { 
 
    $('body').append('<input type="aText" id="inputField" onclick="popup()">') 
 
    }) 
 

 
}) 
 
    function popup() { 
 
    console.log("clicked"); 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button" id="btn">Click Me!</button> 
 

 
<div id="range-calendar"></div>

Answer 2

popup()関数を宣言$(document).ready(function()関数の外側

$(document).ready(function(){ 
 

 
$('#btn').on('click', function(){ 
 
    $('body').append('<input type="aText" id="inputField" onclick="popup()">') 
 
})  
 

 
}); 
 

 
function popup(){ 
 
    console.log("clicked"); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button type="button" id="btn">Click Me!</button> 
 

 
<div id = "range-calendar"></div>

Answer 3

はこれを試しているので、あなたがその未定義popup関数を呼び出す場合：

<script> 
function popup(){ 

    console.log("clicked"); 

} 

$(document).ready(function(){ 
$('#btn').on('click', function(){ 
    $('body').append('<input type="aText" id="inputField" onclick="popup()">'); 
});  
}); 
</script> 

Answer 4

使用することができますe次のコード。

$(document).on('click','#inputField',function(e){ 
// code goes here. 
});