Jquery .dialog不能從圖像輸入中打開

Question

我有2個選項卡，每個選項卡都有一個表格。每個表的最後一列都有一個輸入類型=圖像來打開模型對話框。 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的元素必須是唯一的，使用類屬性組類似的元件，當使用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