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

Question

在我解析 JSON 并将值放入 TABLE TR 后，显示模态 window 时出现问题。

 $('#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

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

Show modal on click using AJAX and JavaScript

javascript

ajax

jquery

json

modal-dialog

为什么会这样？