多次射击ajax

Question

如何使此ajax函数针对每个输入字段触发？ 当前，仅刷新第一个字段，而不会刷新其他字段。

的HTML：

<input id='item_name_1' value='item_name' onclick='test("1",  "item_name");'/>
<input id='item_value_2' value='item_value' onclick='test("2", "item_value");'/>

jQuery：

   function test(id, field_name){

    $('#'+field_name+'_'+id).keyup(function(){
        $.ajax({
            type: "POST",
            url: "/admin/shop/update_harmonized_details",
            data:{
                id: id,
                field_name: field_name,
                field_value: $('#'+field_name+'_'+id).val()
            },
            success: function(resp){
                if(resp.msg == 'Success'){
                    alert('Value Updated');
                }
            }
        })
    });
}

Answer 1

<input id='item_name_1' value='item_name' class="listenToMe" />
<input id='item_value_2' value='item_value' class="listenToMe" />

 $('.listenToMe').keyup(function(){
     var value = $(this).val();
     var fieldID = $(this).attr('id').split('_');
     var id = fieldID[2];
     var name = fieldID[0] + '_' + fieldID[1];
     console.log('Value: value');
     console.log('ID:'+ id);
     console.log('Name:'+name);
 });

https://jsfiddle.net/vyeL9xu1/

如果要避免解析id属性，则可以使用data属性，并使用$(selector).data('attributename')引用值。 因此，就像您可以将data-fieldname添加到输入并使用$(this).data('fieldname')引用一样。

此外，您似乎正在基于“键”更新数据。 AJAX调用是异步的，不一定会按预期到达，处理或完成。 您可能在这里遇到问题。 如果有人输入“ John”，它将按该顺序发送到服务器，但是o或h可能最后到达那里，然后无法正确保存。 最好提供一个保存按钮，或者仅在前一个事件完成后才触发一个新事件，诸如此类。