无法显示动态元素的自定义对话框

Question

我正在尝试通过单击按钮打开一个对话框，但它不适用于多行..意味着动态元素

jsp代码：

 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
 <script src="//malsup.github.com/jquery.form.js"></script>
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
//loop starts
<table>
<tr>


 <td style="" class="tdx" bgcolor="#CCCCCC"><a href=" <%=contextName%>/jsp/knowledgeBase/kbDetails.jsp?kbaseID=<%=kbaseID%>&app=<%=motsID%>&env=<%=env%>&env=<%=env%>&ptitle"=<%=pTitle%>><%=kbaseID%></a></td>

                <td style="" class="tdx" bgcolor="#CCCCCC"><%=motsName%></td>

                <td style="" class="tdx" bgcolor="#CCCCCC"><%=problemDescription%></td>

    <td class="tdx" bgcolor="#CCCCCC" style="" id="sol" style="background-color:white;border-style:ridge">

         <div id="dialog">

                <p><%=solution%></p>

         </div>
     <button id="opener">Open Dialog</button>
    </td>

        </tr>   
   </table>
//loop ends

jquery 代码：

  $(function() {
  $( "#dialog",this ).dialog({
   autoOpen: false,
   show: {
     effect: "blind",
     duration: 1000
   },
  hide: {
    effect: "explode",
    duration: 1000
  }
  });

  $( "#opener",this ).click(function() {
  $( "#dialog" ).dialog( "open" );
  });
  });

对话框打开只有一个条目时格式不好，动画不流畅

Answer 1

将<button id="opener">Open Dialog</button> 更改为<button class="opener">Open Dialog</button> 和<div id="dialog"> 更改为<div class="dialog">

然后

$(function() {
    $('.dialog').dialog({
        autoOpen: false,
        show: {
            effect: "blind",
            duration: 1000
        },
        hide: {
            effect: "explode",
            duration: 1000
        }
    });

    $('.opener').click(function() {
        $(this).prev().dialog( "open" );
    });
});