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

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
 });

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

我不确定将代码放在正上方的什么位置。我已将它放在 $('#vesselinfo').html(htmlToInsert); 下方的 $.post 中，这是我唯一可以获得模态的地方甚至开放，但仅限于第一条记录。

基本上，当我将第二段代码放在 $.post 中时，我只能让模式打开第一条记录。在我放置代码的任何其他地方，模态根本不会打开。

我尝试使用 $(document).ready(function{}); 但无济于事。

我错过了什么？

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 恢复具有该 id 的第一个元素(如果重复)