Jquery选择器对添加的dom元素没有动态行为

Jquery selector not behaving dynamically on added dom element

本文关键字：动态 元素 dom 选择器 添加 Jquery      更新时间：2023-09-26

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

例如，当我在第一次调用模态时输入'3' in时，行为如预期的那样。然而，第二次或任何后续时间模态创建，我输入一个不同的值，如'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选择器的覆盖动态行为将是非常感激的。

这一行

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

获取类名="choice_quantity"的第一个元素的值。你需要把它改成

var quantityItem = $(this).prev('input').val();
相关文章：