jQuery选择器在添加的dom元素上没有动态表现

Question

我正在尝试获取一个动态模态以与输入字段一起显示，并在该模态添加到DOM的每次迭代中检索输入的值。 当前，在第一次迭代中为输入分配了正确的值，并为每个后续迭代保留了该值。

例如，当我在第一次调用模态时在输入中输入“ 3”时，行为是预期的。 但是，在第二次或之后的任何时间创建模态，并且输入其他值（例如“ 4”或“ 5”）时，我始终会收到“ 3”作为输入值。

这是代码创建模态的样子：

//show item choice input screen when item clicked
$(".item_choice").click(function() {
    selectedItemId = $(this).attr('id');
    var overlay = "<div class=\"grey_out\">\
    <div class=\"choice_details\">\
        <h2>"+selectedItemId+"</h2>\
        <div class=\"spacing_vert_small\"></div>\
        <h3>Quantity</h3>\
        <input class=\"choice_quantity\" type=\"text\"/>\
        <a class=\"choice_quantity_submit\" >OK</a>\
    </div>\
        </div>";

    $(".page_header").before(overlay);
});

这是从模态中检索字段值的样子：

$( document ).on( "click", "a.choice_quantity_submit", function() {

    var quantityItem = $(".choice_quantity").val();
    var domId = '#' + selectedItemId + ' h2';
    $(domId).text(quantityItem);

    $(".grey_out").fadeOut('slow', function() {
        console.log('completed?');
    });
});

我认为问题在于document.on('click')被调用一次，并引用了创建叠加层的原始迭代。 任何帮助使覆盖的JQuery选择器动态运行的帮助将不胜感激。 提前致谢。

Answer 1

这条线

var quantityItem = $(".choice_quantity").val();

正在获取类名称为“ choice_quantity”的第一个元素的值。 您需要将其更改为

var quantityItem = $(this).prev('input').val();