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();

获取第一个元素的值，类名为＆＃34; choice_quantity＆＃34;。您需要将其更改为

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

Jquery选择器在添加的dom元素上不动态运行

1 个答案: