Question

我有一个表，其行使用jQyery动态生成。每行都有一个下拉列表和一个文本框。将根据每行的下拉列表选择自动填充文本框。我的代码适用于第一行但不适用于新添加的行。这是我的代码..

Jquery的

$('select[name^="itemName"]').on('change',function(){
        var itemName = $(this).val();

        $.ajax({
            url:'retrieve_item.php',
            type:'post',
            data:{itemName:itemName},
            dataType:'json',
            success:function(data){
                var itemRate = data.ItemRate;
                $(this).closest('tr').find($('input[name^="rate"]').val(itemRate));
            },
            error:function(xhr, ajaxOptions, thrownError){

            },
        });
    });

Answer 1

你的问题是你在成功回调中使用$(this)，它没有引用调用该事件的元素。

您需要存储$(this)的引用并在成功回调中使用它。

使用

$('select[name^="itemName"]').on('change',function(){
    var _this = $(this); //Store the reference in a variable

    var itemName = $(this).val();
    $.ajax({
        success:function(data){
            //Use the reference here
            _this.closest('tr').find('input[name^="rate"]').val(data.ItemRate));
        },
    });
});

您还有语法错误，.find($('input[name^="rate"]')应为.find('input[name^="rate"]')。已从选择器中删除$(。

另外，根据评论新添加的行未填充。：

当您动态创建控件时。您需要使用Event Delegation委托事件方法{。}}来使用.on()。

即

$(document).on('event','selector',callback_function)

事件处理程序仅绑定到当前选定的元素;它们必须存在于您的代码进行事件绑定调用时的页面上。

使用

$(document).on('click', 'select[name^="itemName"]', function(){
    //Your code
});

代替document，您应该使用最接近的静态容器以获得更好的性能。

委派事件的优点是，它们可以处理来自稍后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，我们可以使用委托事件将click事件绑定到动态创建的元素，并且还避免频繁附加和删除事件处理程序的需要。

每个动态生成的表行上的Ajax

1 个答案: