Question

我正在使用此自动填充功能，该功能从输入descricaoItem(description)获取值，将其发送到查询并从数据库填充具有codigo(code)值的其他输入字段。代码如下：

$(document).ready(function() {          

            $('#descricaoItem0').change(function () {

            $.post('mandaDescricao.php',
                {
                   descricao: document.getElementById('descricaoItem0').value
                },     

                    function(data){
                        var obj = $.parseJSON(data);
                        $('#codigoItem0').val(obj.codigo); 

                    });   
                });         
        });

这个工作正常，但我想在用户按下按钮时动态创建这些输入。已经有了这个功能，并且使用与（descricaoItem0，descricaoItem1相关的不同ID（codigoItem0，codigoItem1等等）创建输入， ...）。但是，在动态创建这些输入的情况下，我无法找到使用上述函数的方法。

你能帮帮我吗？我不希望将此功能复制并粘贴到descricaoItem20。

Answer 1

创建一个由输入对象数组组成的JSON对象。

[ {id: '#codigoItem0'}, {id: '#codigoItem1'}, {id: '#codigoItem2'} ]

使用forEach循环将更改事件侦听器应用于每个单独的节点。

var JSONObj =  [ {id: '#codigoItem0'}, {id: '#codigoItem1'}, {id: '#codigoItem2'} ]

JSONObj.forEach(function(input) {
  var id = input.id;

  $(id).change(function(e) {
    $.post('mandaDescricao.php',
      {
         descricao: document.getElementById(id).value
      },

      function(data){
        var obj = $.parseJSON(data);
        $(id).val(obj.codigo); 

      });
    });  
  })
})

可能值得制作一个更详细的JSON输入数组，其中input-Object可能如下所示：

{
  id: 'inputID',
  name: 'inputName'
  val: 'Foo',
  placeholder: 'Bar',
  callback: '_aCallbackMethod()'
}

然后你可以根据这些详细输入的数组创建输入元素，并将它们作为对象处理，而不是需要用$（blah）来查询DOM。： - ）

Answer 2

将您的活动分配器包裹在一个功能中！每次添加新输入时，触发此功能并传递正确的ID号。

＆＃13;

function assignOnChangeToInput(id) {
  $('#descricaoItem' + id).change(function() {

    $.post('mandaDescricao.php', {
        descricao: document.getElementById('descricaoItem' + id).value
      },

      function(data) {
        var obj = $.parseJSON(data);
        $('#codigoItem' + id).val(obj.codigo);

      });
  });
});
}

＆＃13;

Answer 3

您不需要使用ID（这将有助于您的动态问题）您可以使用类将事件添加到所有输入，然后在输入更改事件中使用this进行输入用户正在与之交互，例如

<input class="descricaoItem" />
<input class="descricaoItem" />
<input class="descricaoItem" />
<input class="descricaoItem" />
<input class="descricaoItem" />

$(document).ready(function() {

  $('.descricaoItem').on("input", function() {
    var descricaoValue = $(this).val();
    var self = this; // save context of this
    $.post('mandaDescricao.php', {
        descricao: descricaoValue
      },
      function(data) {
        var obj = $.parseJSON(data);
        $(self).val(obj.codigo);
      });
  });
});

这是一个最小的例子（没有POST请求）

＆＃13;

$(document).ready(function() {
  $('.descricaoItem').on("input", function() {
    var descricaoValue = $(this).val();
    var self = this; // save context of this
    $(self).val("codigo obj: " + Math.floor(Math.random() * 100) + 1);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="descricaoItem" />
<input class="descricaoItem" />
<input class="descricaoItem" />
<input class="descricaoItem" />
<input class="descricaoItem" />

＆＃13;

如何使用json中的动态创建输入的自动填充功能？

3 个答案: