Question

我有一个问题我无法解决尽管我已经阅读了类似问题的所有可能解决方案我有一个ajax请求，成功时，将一行添加到表中在里面，我必须放一个显示叠加窗口的链接。

这是html'静态'代码：

<tr valign="top" id="trc_0">
<td><strong><em>Principal Investigator</em></strong></td>
<td><span id="cName_0">Georg Wohlfahrt</span></td>
<td><span id="cInst_0">University of Innsbruck</span></td>
<td><span id="cMail_0">georg.wohlfahrt@uibk.ac.at</span></td>
<td><input type="checkbox" id="ifch_0" disabled="disabled"  /></td>
<td><input type="checkbox" id="ibch_0" disabled="disabled"  /></td>
<td><input type="checkbox" id="iach_0" disabled="disabled"  /></td>
<td><a href='#' onclick='deleteColl(518,0 );'>Delete</a>&nbsp;<a href="#" class='modalInput' rel='#pi_colls' id='edit_coll_0' onclick='collMe( 0 , "A",518);' Edit</a></td>
</tr>

这是添加行

的jquery代码

trToAdd="<tr id='trc_"+collToSend+"'><td>Collaborator</td>";
trToAdd+="<td><span id='cName_"+collToSend+"'>"+$("#collNamex").val()+"</span></td>";
trToAdd+="<td><span id='cInst_"+collToSend+"'>"+$("#collInstx").val()+"</span></td>";
trToAdd+="<td><span id='cMail_"+collToSend+"'>"+$("#collMailx").val()+"</span></td>";
trToAdd+="<td>"+inputF+"</td>";
trToAdd+="<td>"+inputB+"</td>";
trToAdd+="<td>"+inputA+"</td>";
trToAdd+="<td><a href='#' class='modalInput' rel='#pi_colls'>Edit</a></td>";
trToAdd+="</tr>";
$('#collTab tr:last').after(trToAdd);

插入了相关行，但是应该显示叠加窗口的事件不起作用

最后，我发布了html和javascript for overaly：

<div class="modal" id="pi_colls">
<h2>This is a PI dialog</h2>
<table>
<tr><td>Coll type</td><td>PI: <input type="checkbox" id="pix" />Coll: <input type="checkbox" id="collx"  /></td></tr>
<tr><td>Name</td><td><input type="text" id="collNamex" /></td></tr>
<tr><td>Institution</td><td><input type="text" id="collInstx" /></td></tr>
<tr><td>Mail</td><td><input type="text" id="collMailx" /></td></tr>
<tr><td>Type</td><td>Anc: <input type="checkbox" id="collAncx" />Bio: <input type="checkbox" id="collBiox"  /><br />Flu:<input type="checkbox" id="collFlux"  /></td>      </tr>
 </table>

<p>
<a href="#" class="close" onclick="saveColl();">Yes</a>
<a href="#" class="close">No</a>
 </p>
</div>


$(document).ready(function () {

    var triggers = $(".modalInput").overlay({

        mask: {
            color: '#ebecff',
            loadSpeed: 200,
            opacity: 0.9
        },

        closeOnClick: false
    });

 });
</script>

希望我一直很清楚......任何人都可以帮助我吗？感谢名单迭

Answer 1

您必须委派活动：

$('#idofTable').delegate('a.modalInput', 'click', function() {

    $(".modalInput").overlay({

        mask: {
            color: '#ebecff',
            loadSpeed: 200,
            opacity: 0.9
        },

        closeOnClick: false
    });
});

Answer 2

感谢您的回复有一点点改善。问题是添加的行上的click事件仅在第二次单击后触发这是一个非常简化的页面的link，没有任何服务器功能。你可以查看页面背后的整个代码，因为它是纯粹的html + javascript

感谢迭

jquery：为叠加窗口动态添加事件

2 个答案: