Question

我在尝试向动态创建的内容添加自动填充字段时遇到了一些麻烦。之前它的工作正常，因为文本框是用HTML生成的，但我无法想象如何使它与动态生成的内容一起使用（即使通过我使用静态文本框id进行测试）

自动填充：

jQuery(document).ready(function($){
 var products= JSON.parse( '<?php echo json_encode($products_list) ?>' );
 var t = 0;
 var r = '<?php echo json_encode($number_of_rows_tuote) ?>';
 var availableProducts = [];
 var cellPlace = [];

 while(t < r){
 availableProducts.push(products[t]['prsku']+":"+products[t]['prname']);
 cellPlace.push(t);
  t++;
  }

  $( "#product2" ).autocomplete({
source: availableProducts
});

});

动态制作内容

function addElement()
{

var contentID = document.getElementById('more');
var newTBDiv = document.createElement('div');
newTBDiv.setAttribute('id','strText'+intTextBox);
newTBDiv.innerHTML ="<br><div class='product'><TABLE><tr>";

newTBDiv.innerHTML += "<td><input type='text' placeholder = 'product_code' name='sku_" + intTextBox + "' id='sku_" + intTextBox + "'/></td><td><input type='text' id='product2' name='product2'></td>;

contentID.appendChild(newTBDiv);
}


<body onload="addElement();">

Answer 1

调用函数绑定自动完成功能，如下所示，并从正文中删除onload。

<body>

注意 - 您在动态元素字符串末尾错过"，即在</td>之后，请更正。

jQuery(document).ready(function($){
 var products= JSON.parse( '<?php echo json_encode($products_list) ?>' );
 var t = 0;
 var r = '<?php echo json_encode($number_of_rows_tuote) ?>';
 var availableProducts = [];
 var cellPlace = [];

 while(t < r){
 availableProducts.push(products[t]['prsku']+":"+products[t]['prname']);
 cellPlace.push(t);
  t++;
  }

  $('body').load(function(){
      var contentID = document.getElementById('more');
        var newTBDiv = document.createElement('div');
        newTBDiv.setAttribute('id','strText'+intTextBox);
        newTBDiv.innerHTML ="<br><div class='product'><TABLE><tr>";

        newTBDiv.innerHTML += "<td><input type='text' placeholder = 'product_code' name='sku_" + intTextBox + "' id='sku_" + intTextBox + "'/></td><td><input type='text' id='Product2' name='product2'></td>";
        contentID.appendChild(newTBDiv);
       //bind autocomplete
       $( "#Product2").autocomplete({
        source: availableProducts
       });
  });

});

Answer 2

尝试在addElement函数之后调用自动完成功能。要么简单地说 $（“＃product2”）。autocomplete（{ 来源：availableProducts }）; 最后一个addElement函数中的这些行就像这样

            function addElement()
            {

            var contentID = document.getElementById('more');
            var newTBDiv = document.createElement('div');
            newTBDiv.setAttribute('id','strText'+intTextBox);
            newTBDiv.innerHTML ="<br><div class='product'><TABLE><tr>";

            newTBDiv.innerHTML += "<td><input type='text' placeholder = 'product_code' name='sku_" + intTextBox + "' id='sku_" + intTextBox + "'/></td><td><input type='text' id='product2' name='product2'></td>;

            contentID.appendChild(newTBDiv);
            $( "#product2" ).autocomplete({
            source: availableProducts
            });

            }

自动填充功能不适用于动态创建的内容

2 个答案: