onclick函數沒有爲動態生成的輸入定義

Question

我在想爲什麼下面的代碼不適合我。

我想要做的只是在輸入字段被點擊時在控制檯上打印一些東西。

我正在通過單擊按鈕「單擊我」來生成輸入字段。每個輸入都有一個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()功能外。

爲什麼？

如果調用popup功能的不確定，因爲它的定義只在$(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

全球的.so地方功能試試這個：

<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. 
});