Javascript 如何重复使用ajax检索数据的文本字段

我有这段代码，它通过ajax从数据库中检索数据，并可以添加无限制的文本字段：

<div class="input" id="itemRows">
    <div class="clone">
        <style>
            .txtHint {
                width:95%;
                padding:10px 6px;
                border-bottom:solid 3px #06C;
                background-color:#f1f1f1;
                margin-right:5px;
            }
        </style>
        <input onchange="showUser(this.value)" type="text" class="clientphone" placeholder="رقم العميل" name="clientmergedid[]" />
        <input type="text" class="clientdes" placeholder="صفة العميل" name="clientmergeddes[]" />
        <div class="clearfloat"></div>
        <script>
            function showUser(str) {
                if (str == "") {
                    document.getElementById("txtHint").innerHTML = "";
                    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("txtHint").innerHTML = xmlhttp.responseText;
                    }
                }
                xmlhttp.open("GET", "searchuser/getuser.php?clientmergedid=" + str, true);
                xmlhttp.send();
            }
        </script>
        <div id="txtHint" class="txtHint">بيانات العميل</div>
        <div class="clearfloat"></div>
    </div> <a href="#" class="add" rel=".clone">إضافة المزيد</a>

    <script type="text/javascript">
        $(function() {
            var removeLink = ' <a class="remove" href="#" onclick="$(this).parent().slideUp(function(){ $(this).remove() }); return false">إزالة</a>';
            $('a.add').relCopy({
                append: removeLink
            });
        });
    </script>
    <div class="clearfloat"></div>
    <input onClick="addRow(this.form);" class="clientadd" type="button" value="جديد" />
    <div class="clearfloat"></div>
</div>

.txtHint{
宽度：95%；
填充：10px 6px；
边框底部：实心3px#06C；
背景色：#f1f1；
右边距：5px；
}
函数showUser（str）{
如果（str==“”）{
document.getElementById（“txtHint”）.innerHTML=“”；
返回；
}
if（window.XMLHttpRequest）{//IE7+、Firefox、Chrome、Opera、Safari的代码
xmlhttp=新的XMLHttpRequest（）；
}else{//IE6、IE5的代码
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
}
xmlhttp.onreadystatechange=函数（）{
if（xmlhttp.readyState==4&&xmlhttp.status==200）{
document.getElementById（“txtHint”）.innerHTML=xmlhttp.responseText；
}
}
xmlhttp.open（“GET”、“searchuser/getuser.php？clientmergedid=“+str，true”）；
xmlhttp.send（）；
}
بيانات العميل
$（函数（）{
var removeLink=''；
$（'a.add'）.relCopy({
附加：removeLink
});
});

---

问题是它只能检索第一个

txtHint

div的数据。它如何对其他输入进行相同的检索？

对于您的初始问题，为每个输入指定一个类，然后将

更改

处理程序绑定到该类的元素。这样，您就可以拥有任意数量的输入，并具有该行为：

<input class="my_class" type="text">
<input class="my_class" type="text">

jQuery(function () {
   jQuery('.my_class').on('change', function () {
      var the_input = jQuery(this);
      console.log("My new value is " + the_input.val());
      /// your ajax code goes here, and has access to the_input
   });
});

jQuery（函数（）{
jQuery（'.my_class'）。on（'change'，function（）{
var_输入=jQuery（this）；
log（“我的新值是”+the_input.val（））；
///您的ajax代码位于此处，并且可以访问\u输入
});
});

例如：

---

此外，由于您似乎已经在使用jQuery，我建议您在ajax调用中使用它的方法，而不是使用现有代码。

元素的id必须是唯一的，所以应该只有一个id为

txtHint

的元素，我知道我在问如何给新的可重复字段一个新的函数，新的idi不能让它运行是小提琴没有做你期望的，还是它做了你想要的，但是你在实现你自己的版本时遇到了问题？好的，也许你能解释一下你期望的是什么？我的代码处理任意数量的文本输入的onChange事件，这正是您所要求的。如果不是这样，也许你可以解释一下你真正想要的是什么。