Ajax 每个动态生成的 table 行

Question

我有一个 table，其行是使用 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 using .on() 委托事件方法。

即

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

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

使用

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

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

The delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, we can use delegated events to bind the click event to dynamically created elements and also to avoid the need to frequently attach and remove event handlers.

Ajax 每个动态生成的 table 行

Ajax on each dynamically generated table rows

html

ajax

jquery