JavaScript，在动态添加的元素上启用查询选择器

Question

我在正文中有 DIV 元素，我复制该元素以向数据库添加更多元素，但是当我执行如下所示的脚本时:

$(document).ready(function(){

$(document.body).on('change','.jobType',function(){
    var value = this.options[this.selectedIndex].value;
    select = this;
    $.ajax({
        url: 'getpart',
        dataType: "json",
        type: 'post',
        data: {
            part_id : value,
        },
        success: function( data ) {
            wrapper = select.closest('.wrapper');
            console.log(v, select);
            inputPrice = wrapper.querySelector('.jobPrice')
            console.log(inputPrice, data.Part.price);
            inputPrice.value = data.Part.price;
        }
    });
});
});

var wrapper 是 null 因为它是动态添加到 DOM 的，有没有办法在新添加的元素上使用 document.querySelector() ？

Answer 1

我已将 jquery 语句添加到您现有的代码中。如果你有 jQuery，你可以使用它。

变化:

1) var select = $(this);

2) var value = select.val();

3) var wrapper = select.closest('.wrapper');

4) var inputPrice = wrapper.find('.jobPrice')

$(document).ready(function(){

  $(document.body).on('change','.jobType',function(){
    var select = $(this);
    var value = select.val();
    $.ajax({
        url: 'getpart',
        dataType: "json",
        type: 'post',
        data: {
            part_id : value,
        },
        success: function( data ) {
            var wrapper = select.closest('.wrapper');
            console.log(select);
            var inputPrice = wrapper.find('.jobPrice')
            console.log(inputPrice, data.Part.price);
            inputPrice.val(data.Part.price);
        }
    });
  });
});