Question

我有一个jquery代码，我试图在点击button时打开一个对话框。我希望它是动态的所以我把选择器作为类，但它没有响应

javascript代码：

  <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 class="dialog">

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

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

    </tr>   
 </table>

//循环结束

jquery代码：

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

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

fiddle link

Answer 1

初始化jQuery UI对话框时，HTML会发生变化，您突然有了

<button class="opener">Open Dialog</button>

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-draggable ui-resizable" tabindex="-1" role="dialog" aria-describedby="ui-id-1" aria-labelledby="ui-id-2" style="display: none; position: absolute;">
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span id="ui-id-2" class="ui-dialog-title">&nbsp;</span>
    <button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" role="button" aria-disabled="false" title="close"><span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span><span class="ui-button-text">close</span>
    </button>
</div>
<div class="dialog ui-dialog-content ui-widget-content" id="ui-id-1">
    <p>IT WORKS!!!</p>
</div>
<div class="ui-resizable-handle ui-resizable-n" style="z-index: 90;"></div>
<div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div>
<div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div>
<div class="ui-resizable-handle ui-resizable-w" style="z-index: 90;"></div>
<div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div>
<div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90;"></div>
<div class="ui-resizable-handle ui-resizable-ne" style="z-index: 90;"></div>
<div class="ui-resizable-handle ui-resizable-nw" style="z-index: 90;"></div>

请注意，不再有$(this).prev().dialog( "open" );，因为jQuery UI会删除该元素并为实际对话框创建HTML

你必须做

$('.dialog').dialog( "open" );

FIDDLE

您还可以将元素存储在变量

中

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

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

FIDDLE

Answer 2

您已将opener声明为id

使用

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

按钮单击没有响应

2 个答案: