Question

我有以下代码：

$('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 ...

没有任何事件

知道如何解决这个问题吗？

Answer 1

这里已经有了很好的答案，所以我将向您展示如何在Pure 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
    `;

});

Answer 2

如果您将有幸使用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());
}

更干净！

Answer 3

以下适用于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>

通常情况下，我会使用$（文档）而不使用引号。

Answer 4

问题是您没有为容器定义value属性。通过这段代码：

$('#container').append('<input type="text" id="mystuff" value="info"><a   
href="javascript:void(0);"      
onclick="javascript:showStuff();">Show stuff</a>');

你会得到价值。

警报（的document.getElementById（ “容器”）的innerHTML。）;

将返回#container中的任何内容。测试！

Answer 5

您也可以像这样直接在标签上触发事件。

$('document').ready(function() {
     $('#container').append('<input type="text" id="mystuff">',
        $('<a href="">Show stuff</a>').click(function() {
            alert($('#mystuff').val())
        })
    )
});

看起来很好，很容易阅读！

获取动态创建的输入字段的value（）

5 个答案: