javascript - Jquery .dialog 无法从表中的图像输入打开

Question

我有 2 个选项卡，每个选项卡都有一个表格。每个表的最后一列都有一个输入 type=image 用于打开模型对话框表单。 Javascript 可以很好地隐藏表单，但当我单击任何行中的输入图像时，对话框不会打开。我希望能够向任何行添加注释。适用于简单的表单，但不适用于我在表格中使用它的方式。有什么线索吗？谢谢。

标签

<ul class="tabs">
    <li class="activeTab"><a href="#tab1">En route</a></li>
    <li><a href="#tab2">Arrived</a></li>
</ul>

每个选项卡都有一个表格

<thead>
    <tr>
        <th>Company</th>
        <th>Comment</th>
        <th>Add Comment</th>
    </tr>
</thead>
<tbody id="enrouteShipments">
    <tr id="7453">
        <td>Company A</td>
        <td></td>
        <td><input type="image" src="images/icons/dark/pencil.png" id="addComment"></td>
    </tr>
    <tr id="7454">
        <td>Company B</td>
        <td></td>
        <td><input type="image" src="images/icons/dark/pencil.png" id="addComment"></td>
    </tr>
</tbody>

对话框表单(隐藏)

<div id="dialogAddCommentForm" title="Enroute Comment">
    <form class="mainForm" id="addCommentForm" method="post" >
        <label>Comments:</label>
        <textarea rows="8" cols="" name="textarea" id= "addAComment"></textarea>
        <div class="submitForm"><input type="submit" value="Add Comment" class="blueBtn" id="addCommentBtn"/></div>
    </form>
</div>

脚本

$(document).ready(function() {
    $( "#dialogAddCommentForm" ).dialog({ autoOpen: false, modal: true, width: 500 });
        $( "#addComment" ).click(function() {
            $( "#dialogAddCommentForm" ).dialog( "open" );
        });
});

Answer 1

元素的 ID 必须是唯一的，使用 class 属性对相似的元素进行分组，当您使用 id 选择器时，它将仅获取具有给定 id 的第一个元素

<input type="image" src="images/icons/dark/pencil.png" class="addComment">

然后

$(document).ready(function() {
    $( "#dialogAddCommentForm" ).dialog({ autoOpen: false, modal: true, width: 500 });
        $( ".addComment" ).click(function() {
            $( "#dialogAddCommentForm" ).dialog( "open" );
        });
});

演示:Fiddle