Question

我正在使用jQuery leanmodal插件（http://leanmodal.finelysliced.com.au/）

我有一个php页面，其中有使用leanmodal弹出窗口更新数据的链接：

在首页中生成了以下具有不同参数传递给函数的链接，以显示leanmodal弹出窗口。

<a id="go" rel="leanModal" name="editdetails" href="#editdetails" onclick="showDataDetails('42690');">Edit</a>
<a id="go" rel="leanModal" name="editdetails" href="#editdetails" onclick="showDataDetails('42691');">Edit</a>
<a id="go" rel="leanModal" name="editdetails" href="#editdetails" onclick="showDataDetails('42692');">Edit</a>
<a id="go" rel="leanModal" name="editdetails" href="#editdetails" onclick="showDataDetails('42693');">Edit</a>

......

同一页面还获得了一些通过ajax调用生成的链接（使用jquery添加到文档中），该链接也与上述链接相同，但是leanmodal弹出窗口和函数未得到执行：

<a id="42694" rel="leanModal" name="editdetails" href="#" onclick="showDataDetails('42694');">Edit</a>
<a id="42695" rel="leanModal" name="editdetails" href="#" onclick="showDataDetails('42695');">Edit</a>
<a id="42696" rel="leanModal" name="editdetails" href="#" onclick="showDataDetails('42696');">Edit</a>

......

它与onclick事件绑定到jQuery中动态创建的锚链接元素有关。

我想通过单击动态生成的链接来打开leanmodal弹出窗口

function showDataDetails(id) { 
....
....
}

请告知...

Answer 1

我认为您必须为链接到同一模式的每组链接设置唯一的REL属性。如果为两个节点设置两个相同的ID，则选择器将无法正常工作。

function showDataDetails(id) {
  ...
   $("[rel*="+id+"]").leanModal({...});
  ...
}

但是我认为...
代码必须类似于：

例如数据表

 <table>
 <tbody>
    <tr id='42694'><td data-name="Ron">Ron <a href="#editdetails" onclick="showDataDetails('42694');">Edit</a></td></tr>
    <tr id='42695'><td data-name="Harry">Harry <a href="#editdetails" onclick="showDataDetails('42695');">Edit</a></td></tr>
    <tr id='42696'><td data-name="Hermiona">Hermiona <a href="#editdetails" onclick="showDataDetails('42696');">Edit</a></td></tr>
 </tbody>
 </table>

然后您可以动态添加相同的锚代码

<a href="#editdetails" onclick="showDataDetails('42695');">Edit</a>

您的模式窗口

<div rel="leanModal" id="editdetails" class="modal">
   <form>
      This is EDIT modal content
      <input id="idInput" type="hidden" name="id" />
      <input id="nameInput" type="text" name="name" />
      <button type="submit">Save</button>
   </form>
</div>

和功能。在显示模式之前，必须将相关字段中的数据存储为模式形式。

function showDataDetails(id) {
   // get the value of field
   let nameValue = $('#'+id+' td[data-name]').data('name');

   // put the value to form input in modal window
   $('#nameInput').val(nameValue);
   // put the id in hidden input for backend purpose
   $('#idInput').val(id);

   // show one modal for all fields
   $('#'+id+' a').leanModal();
}

https://jsfiddle.net/pretordh/j28r6vko/

通过单击动态生成的链接来打开leanmodal弹出窗口

1 个答案: