Question

在我正在处理的网站上，我有一个ajax调用，它返回一大块代码，然后插入到div标签中。在这段代码中，我有select，隐藏input和button。当用户点击该按钮时，我需要获取select和input的值。

我的按钮最初无法正常工作，我使用.on()来解决此问题，以获取以下代码：

$(document).ready(function(){

    $(document).on('click','#addBtn', function(){
       var qty = $('#qtySelect').val();
       var itemID = $('#itemName').val();

        alert(qty + "    " + itemID);
    });

    $('#genStuff').click(function(){
        $('#newContent').append('<div id="infoRight">Quantity: <select name="qty"><option value="1">1</option></select><input type="hidden" name="itemID" value="1000"><button id="addBtn">Add to Cart</button></div>');
    });

});

按钮现在可以使用了，但我得到undefined的值。

JSFiddle问题。

通过Google搜索，我不断获得处理click事件的结果并使用.on()，但这并没有帮助我获得价值。我假设我必须让DOM知道元素在某种程度上存在，但我不确定如何。

编辑：由于长时间盯着我的代码，我犯了一个愚蠢的错误。我忘了把id放在选择和输入上。

Answer 1

您正在使用id selectors。当您使用#时，jquery会搜索具有该ID的元素。

您需要使用其他selector或更改html。

将id="qtySelect"添加到要添加到dom的select元素中，例如

$('#newContent').append('<div id="infoRight">Quantity: <select name="qty" id="qtySelect">.....

Answer 2

试试这个：

当您追加多个元素时，您不应该拥有ID选择器，因为您不应该在同一个Document中有多个ID。我已将其更改为类，每次我找到与单击的按钮
的父级相关的表单元素

<button id="genStuff">Click me!</button>
    <div id="newContent"></div>
    <script>
        $(document).ready(function()
        {
            $(document).on('click', '.addBtn', function()
            {
                var parent=$(this).parents('.infoRight');
                var qty=parent.find('[name="qty"]').val();
                var itemID=parent.find('[name="itemID"]').val();
                alert(qty + "    " + itemID);
            });
            $('#genStuff').click(function()
            {
                $('#newContent').append('<div class="infoRight">Quantity: <select name="qty"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option></select><input type="hidden" name="itemID" value="1000"><button class="addBtn">Add to Cart</button></div>');
            });
        });
    </script>

获取DOM加载jQuery后添加的元素的值

2 个答案: