Javascript 使用jquery修改克隆的html

我试图打开一个很好的弹出窗口来编辑域对象

为此，我有一个弹出式模板隐藏在一个不可见的div页上。 当用户单击按钮时，我尝试用ajax加载域对象，填充模板并显示它

问题是，只填充了模板中的第一个字段

模板：

 <div class="popup" id="addDriverPopup">
        <div class="close"></div>

        <hr class="both"/>

        <div class="container  radius">
            <form action="/driver/manageDriver" method="post" name="driverForm" id="driverForm" >
                <input type="hidden" name="id" id="id" value="" />
                <div class="title"><span>Uus autojuht </span><hr class="line"/></div>
                <p class="name">Nimi </p>
                <p class="input"><input type="text" name="firstName" id="firstName" value="" /></p>

                <p class="name">Perekonna nimi </p>
                <p class="input"><input type="text" name="lastName" id="lastName" value="" /></p>
                <p class="name">Isikukood </p>
                <p class="input"><input type="text" name="personalId" id="personalId" value="" /></p>
                <p class="name">Telefoni number </p>
                <p class="input"><input type="text" name="phoneNumber" id="phoneNumber" value="" /></p>
            </form>

        </p>
        </div>
    </div>

警报（）的输出：

我仔细检查了元素ID的拼写错误。调试显示找到了正确的元素

我错过了什么

提前感谢

尝试更改

alert(popup[0].innerHTML);

到

另外，我在您提供的代码中没有看到“#addDriverPopup”元素。。。它在DOM上的某个地方吗？

什么是

#addDriverPopup

组成的

问题可能是ID冲突。因为要进行克隆，所以最终会得到具有相同值的多个ID

结果可能会有某种冲突。可能想考虑课程。

根据我下面的评论：

$jq.ajax({
  url: 'show',
  dataType: 'json',
  data: {driverId: driverId},
  success: function( data ) {

        $("#id").val(data.id);
        $("#firstName").val(data.firstName);
        $("#lastName").val(data.lastName);
        $("#personalId").val(data.personalId);
        $("#phoneNumber").val(data.phoneNumber);

        $jq('#addDriverPopup').dialog({
                 close: function(){
                       //Do stuff here to clean up, this syntax may be a bi
                      }
        });

  },
  error: function(xhr, error) {
      alert(error);
      unblockUI();
  }
});

---

正如@rcdmk的问题评论所指出的，这似乎是一个平台问题

---

我必须重构代码，将准备编辑的表单返回给客户端，而不是json。解决方案不那么优雅，但跨平台：）

输出相同。AddDriverPup是一个外部容器。它正在工作，因为我可以在alert（）中看到innerHTML/html（）。将布尔值true添加到克隆调用中，看看这是否有帮助？此外，您必须使用唯一的ID。我建议将它们切换为语义上有用的类名，这样会更干净。使用clone（）尝试过，clone（true），不使用clone（）。相同的输出。从AJAX请求返回的数据到底是什么样子的？同样，如果您使用clone并使用这些ID复制元素，它将在DOM中找到第一个ID并更新该元素的值，而不是克隆的元素。您必须为克隆的输入元素使用新ID，或者使用类名。为什么要克隆？为什么不直接显示表单、更新值，然后在提交后清除并再次隐藏？数据输出是什么样子的？id是一个数字，其余的是字符串。这可能是一个暗示吗？我不认为这是数据类型的问题。您是否尝试过像上面那样直接访问ids？数据的输出是什么？它可能缺少这些值。我已经在jsfiddle.net中进行了测试，它是有效的：感谢您的努力。但我在文本字段中看到空值。只填写id字段在我的JSFIDLE中的警报中是否有空文本字段？如果是，您使用的浏览器是什么？是的，空字段。Mac OS 10.8.2、FF、Opera、Safari我认为这是一个浏览器兼容性问题。我可以确认它在Chrome 22和IE 9-Win 7 64位中工作

{"id":1271745,"firstName":"Burak","lastName":"Torum","personalId":"123456","phoneNumber":"123456"}

alert(popup[0].innerHTML);

alert(popup.html());

$jq.ajax({
  url: 'show',
  dataType: 'json',
  data: {driverId: driverId},
  success: function( data ) {

        $("#id").val(data.id);
        $("#firstName").val(data.firstName);
        $("#lastName").val(data.lastName);
        $("#personalId").val(data.personalId);
        $("#phoneNumber").val(data.phoneNumber);

        $jq('#addDriverPopup').dialog({
                 close: function(){
                       //Do stuff here to clean up, this syntax may be a bi
                      }
        });

  },
  error: function(xhr, error) {
      alert(error);
      unblockUI();
  }
});