Javascript 克隆具有唯一ID的输入字段

我有一个表单，我希望有一个用户能够添加尽可能多的项目，因为他们需要。但是，某些项目需要AJAX调用来从数据库检索信息，这些信息将返回到字段中。当前，replace目标是静态的，这意味着无论哪个项调用replace方法，它都只会更改第一个。我需要它来改变那个叫它的。我已经被困在这三天了，任何帮助都将不胜感激

Javascript:

ar uniqueId = 1;

function getAjax(seek, getId, destUrl, reset)
{
var xmlhttp;
if (seek=="")
    {
    document.getElementById(getId).innerHTML=reset;
    return;
    }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById('m_width' + getId).innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET",destUrl+seek,true);
xmlhttp.send();
}




$(function() {
     $('.addRow').click(function() {
         var copy = $("#original").clone(true);
         var formId = 'NewForm' + uniqueId;
         copy.attr('id', formId );
         copy.attr('name', formId );
         $('#item').append(copy);
         $('#' + formId).find('input,select,div').each(function(){
            $(this).attr('id', $(this).attr('id') + uniqueId); 
            $(this).attr('name', $(this).attr('name') + uniqueId); 
         });
         $('#NewForm').style.display = 'inline';
         uniqueId++;  

     });
});

$(function() {
     $('.removeRow').click(function() {
     $(this).parent().remove();
    });
});

HTML:

项目
宽度：
没有一个
客户1
客户2
客户3
客户4

和m_width.php：

<?php
require_once $_SERVER['DOCUMENT_ROOT']. '/dev/scripts/connect.php';
require_once $_SERVER['DOCUMENT_ROOT']. '/dev/scripts/authorize.php';
authorize_user();
$media = trim(strip_tags($_GET["media"]));
$query = "SELECT distinct material_id, width FROM media WHERE material_id = $media;";
$result = mysql_query($query);
echo "<label for='media_color_size'>Width: </label><br />";
echo "<select id='media_color_size' name='media_color_size' class='width' style='width: 160px'>";
echo "<option>Select Width</option>";
while ($row = mysql_fetch_assoc($result)) {
    echo "<option value={$row['media_id']}>{$row['width']}</option>";
}
echo "</select>";
return;
?>

---

无需使用唯一ID，您就可以完成所需的工作；不必要的开销太多了。类选择器可以正常工作。这是我的建议；如果每个表单都在
div.item
元素中，那么使用它来进行ajax调用Plus，您不想使用内联JavaScript

$('div.item form select').not('.client').on('change', function() {
    //save a reference to the select element that triggered the change event
    var that = $(this);
    $.ajax({
        url:  '....',
        ....
        success: function() {
            //get the div.item ancestor of the select that triggered the change event
            var divItem = that.closest('div.item');

            //now change elements only within divItem
         }
    });
});

正如您所看到的，所有这些都是在不引用任何特定形式的ID的情况下完成的。因此，您可能不需要为表单分配唯一的ID

概念验证演示：


$（'div.item form select'）。而不是（'.client'）。在（'change'，function（）上{
警报（$（this）.closest（'.container'）.find（'h3'）.text（））；
});

项目1
一个
两个
三
宽度：
没有一个
客户1
客户2
客户3
客户4
项目2
一个
两个
三
宽度：
没有一个
客户1
客户2
客户3
客户4
项目3
一个
两个
三
宽度：
没有一个
客户1
客户2
客户3
客户4
我非常喜欢不使用唯一ID的想法。然而，似乎要使用它，我需要为每个项目（select:first、select:second等）创建一个脚本块。也许我没有看到如何在缩放版本上正确实现这一点；有件事我忽略了。此版本应适用于所有块。
$('div.item form select').not('.client').on('change', function() {
    //save a reference to the select element that triggered the change event
    var that = $(this);
    $.ajax({
        url:  '....',
        ....
        success: function() {
            //get the div.item ancestor of the select that triggered the change event
            var divItem = that.closest('div.item');

            //now change elements only within divItem
         }
    });
});