我有以下代码：
$('document').ready(function() {
$('#container').append('<input type="text" id="mystuff"><a href="javascript:void(0);" onclick="javascript:showStuff();">Show stuff</a>');
});
function showStuff() {
alert($('#mystuff').val());
}
问题是警报说undefined，可能是因为元素mystuff是动态创建的。我以前在动态创建的元素上也遇到过类似的问题。在那些情况下我可以使用.on()，但在这种情况下我认为我不能，因为我只想将 val() 存储到一个变量中。没有我想绑定的事件mystuff...
知道如何解决这个问题吗？
这里已经有了很好的答案，所以我将向您展示如何在纯 JavaScript 中创建相同的效果！如果您仅将 JQuery 用于如此简单的事情，这肯定会加快您网站的加载时间！
document.addEventListener('load', function() {
function showStuff() {
alert(document.querySelector('#mystuff').value);
}
document.querySelector('#container').innerHTML += `
<input type='text' id='mystuff'>
<a href="javascript:void(0);" onclick="javascript:showStuff();">Show stuff</a
`;
});
以下适用于chrome：
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$('document').ready(function() {
$('#container').append('<input type="text" id="mystuff"><a href="javascript:void(0);" onclick="javascript:showStuff();">Show stuff</a>');
});
function showStuff() {
alert($('#mystuff').val());
}
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
不过，通常情况下，我会使用不带引号的 $(document) 。
如果您想享受使用 JQuery 的乐趣，请摆脱所有糟糕的内联 Javascript。
$('document').ready(function() {
$('#container').append('<input type="text" id="mystuff" /><a id="show_stuff" href="#">Show stuff</a>');
$("#show_stuff").click(showStuff);
});
function showStuff() {
alert($('#mystuff').val());
}
干净多了！
问题是您没有为容器定义值属性。通过此代码：
$('#container').append('<input type="text" id="mystuff" value="info"><a
href="javascript:void(0);"
onclick="javascript:showStuff();">Show stuff</a>');
你会得到价值。
alert(document.getElementById("container").innerHTML);
将返回#container 内部的任何内容。经测试！
您也可以像这样直接在 a 标签上触发事件。
$('document').ready(function() {
$('#container').append('<input type="text" id="mystuff">',
$('<a href="">Show stuff</a>').click(function() {
alert($('#mystuff').val())
})
)
});
看起来不错，易于阅读！