为什么会这样？

Question

在解析JSON并将值放入TABLE TR之后出现显示模态窗口的问题。

 $('#serviceload').change(function()  // on dropdown select change
 {
   var page = $('#serviceload').val();  // dropdown selection set to page
   if(page == "")
   {
     $('#completeProfile').hide();  // if page is blank, hide content
   }
   else
   {
     $.post('api/vesselSearch.php', {page: page}, function(data)
     {
       var obj = JSON.parse(data); // parse the data
       $('#vesselinfo').empty(); // clear previous vessel content
       var htmlToInsert = obj.map(function (item)
       {
         return '<tr><td><a href="#" id="editVesselLink" data-toggle="modal" data-vessel="'+item.VESSEL_NAME+'">Edit</a></td><td>'+item.VESSEL_NAME+'</td></tr>';
       });
       $('#vesselinfo').html(htmlToInsert); // insert new vessel content
     });
   $('#completeProfile').show(); // show all content on page
   }
 });

正如您将在上面看到的，在解析JSON之后，我在TABLE行中显示值，这些行可能有多于1行。第一个TD单元格包含一个超链接，该超链接应该打开我的编辑模式。

从行传输数据并在模态中显示它的代码如下所示：

 $('#editVesselLink').click(function(e)
 { 
   e.preventDefault();
   $('#editVesselForm input').val(''); // clear previous values
   $vessel= $(this).attr('data-vessel'); 
   $('#editvesselname').val($vessel);
   $('#editVesselInfoModal').modal('show');  // show the modal
 });

这是我的问题开始的地方。

我不确定将代码放在上面的位置。我把它放在$.post $('#vesselinfo').html(htmlToInsert);下面$.post，这是我唯一能让模态打开的地方，但仅限于第一张唱片。

基本上，当我将第二段代码放在$(document).ready(function{});内时，我只能为第一条记录打开模态。在我放置代码的任何其他地方，模态都不会打开。

我尝试使用$stdout无效。

我错过了什么？

Answer 1

好的，我认为问题出现了：

...
return '<tr><td><a href="#" id="editVesselLink" data-toggle="modal" data-vessel="'+item.VESSEL_NAME+'">Edit</a></td><td>'+item.VESSEL_NAME+'</td></tr>';
...

您无法在代码上重复id属性，因此id="editVesselLink"放置class="editVesselLink"和$('#editVesselLink')放置$('.editVesselLink')

为什么会这样？

通过HTML对流，id必须在HTML上是唯一的，所以jQuery希望只恢复一个具有该id的元素，默认情况下，如果jQuery重复，jQuery将使用该id恢复第一个

使用AJAX和JavaScript在点击时显示模态

1 个答案:

为什么会这样？