1

我需要显示一个行表，每行都有一个锚点，单击该锚点会根据单击的锚点标签打开一个对话框（div 内容）。由于这些锚点是动态生成的，我需要找到一种方法来识别被单击的锚点标签并打开相应的对话框。

XHTML 代码如下：

<ui:repeat var="vDetailTO" value="#{vAdmBean.displayVDetailTOList}" varStatus="vCounter"> 
 <tr>
   <td align="left">
     <h:outputText value="#{vDetailTO.userId}" />
   </td>
  <td align="left">
  <a id="dialogLink-#{vCounter.index}" href="#" owNumber="#vendorCounter.index}">+</a>
  <div id="aNodeSearch-popupLink-#{vCounter.index}"  title="Node"        
      style="display:none;">
      The content is actually big. So, just typing this text here.
      Note that this is the div tag that needs to open based on the anchor tag clicked
      as the content varies for each anchor tag 
   </div>
   </tr>
  </ui:repeat>

JS代码

   $("#aNodeSearch-popupLink-"+$("#frmNode\\:hdnRecordIndex").val()).click(function() {
       var rowNumber = $(this).attr('rowNumber');
       $("#frmNode\\:hdnRecordIndex").attr("value", rowNumber);
           $("#aNodeSearch-popup-"+rowNumber).dialog("open");
       });

    $("#aNodeSearch-popup-"+$("#frmNode\\:hdnRecordIndex").val()).dialog(
    {
    autoOpen : false,
    modal : false,
    resizable : false,
    height : 500,
    width : 750,
    buttons : {
    "Submit" : function() {
       var selNodes = "";
    var rowNumber = $("#frmNode\\:hdnRecordIndex").val();
    var availNodes = "aNodeAvailListId-" + rowNumber;  

        $('#' + availNodes + ' input:checkbox:checked').each(
                function() {
                    selNodes += $(this).val() + ",";
                });

        $("#frmNode\\:hdnArticleNodeIds").attr("value",
                selNodes);

        frmNode["frmNode:btnRefresh"]
                .click();

        $(this).dialog("close");
    }
    }
       });

单击第一行中的锚点时，对话框可以正常打开并且能够执行必要的操作。但是，当我单击后续行时，没有任何反应，甚至 Firefox Web 控制台也没有显示问题。但是如果我用 js 硬编码代码

  aNodeSearch-popupLink-1.click and 
  aNodeSearch-popupLink-2.click and so on as shown below..

能够根据需要查看对话框。

  $("#aNodeSearch-popupLink-1").click(function() {

$("#aNodeSearch-popup-1").dialog("open");
   });

  $("#aNodeSearch-popup-1").dialog(
  {
     ........   
   });

关于如何处理识别单击的锚标记并打开其相应对话框的这种情况的任何想法？

4

1 回答 1

0

您应该使用事件委托，并在处理程序中识别您的链接：

//you should add a common class to your a nodes, if you want to distinguish
//them from other links
$('#myTable').on('click', 'a.specialLink', function(){
    // you can check the anchor's id here :
    var id = this.id;

    // and do whatever you see fit with it
});

<a class="specialLink">使用此模式，您添加到表中的任何新节点都将被自动处理。

于 2013-04-08T09:48:09.197 回答