PHP while循环中的jQuery对话框

问题描述：

以下代码仅适用于表第一行中的按钮.其他自动生成的行的按钮不会打开任何对话框.我想问题是我没有为每个按钮分配不同的id.我怎样才能做到这一点?我阅读了此页面，但没有任何效果.>

The following code works fine just for the button in the very first row of the table. The buttons of the other automatically generated rows don't open any dialog. I guess the problem is that I am not assigning a different id to each button. How can I do that? I read this page but nothing worked.

<table class="table-hovered">
    <tr>
        <th class="text-left big">TITOLO</th>
        <th class="text-centered" align="center">
            <img src="img/w.png" width="35" height="35" title="wikipedia" align="middle"><br>
            wikipedia
        </th>
    </tr>
    <? while($objResult = mysql_fetch_array($objQuery))
    { ?>
        <tr>
            <td class="text-left"><?=$objResult["titolo"];?></td>
            <td class="text-centered">
                <button id="trigger" class="btn">definizione</button>
                <div id="dialog" style="display: none;" title="definizione">
                    <iframe frameborder="0" scrolling="yes" width="480" height="380" src="def.php?titolo=<?=$objResult['titolo'];?>"></iframe>
                </div>
            </td>
            <script>
                $("#trigger").click(function() {
                    $("#dialog").dialog("open");
                });

                $("#dialog").dialog({
                    autoOpen: false,
                    position: 'center' ,
                    title: 'definizione',
                    draggable: true,
                    width: 500,
                    height: 400, 
                    resizable: true,
                    modal: true,
                    show: 'slide',
                    hide: 'fade'
                });
            </script>
        </tr>
    <?  } ?>
</table>

答

问题是因为您要创建具有相同id属性的多个元素，其中id在单个document中必须唯一.而是在#trigger上使用公共类，然后从那里找到要显示的相关#dialog.试试这个:

The issue is because you are creating multiple elements with the same id attribute, where the id must be unique within a single document. Instead, use common classes on the #trigger and from there find the related #dialog to be shown. Try this:

<table class="table-hovered">
    <tr>
        <th class="text-left big">TITOLO</th>
        <th class="text-centered" align="center">
            <img src="img/w.png" width="35" height="35" title="wikipedia" align="middle"><br>
            wikipedia
        </th>
    </tr>
    <? while($objResult = mysql_fetch_array($objQuery))
    { ?>
        <tr>
            <td class="text-left"><?=$objResult["titolo"];?></td>
            <td class="text-centered">
                <button class="btn trigger">definizione</button>
                <div class="dialog" style="display: none;" title="definizione">
                    <iframe frameborder="0" scrolling="yes" width="480" height="380" src="def.php?titolo=<?=$objResult['titolo'];?>"></iframe>
                </div>
            </td>
        </tr>
    <?  } ?>
</table>

然后可以将单个事件处理程序分配给<head>中或</body>之前的.trigger元素，如下所示:

You can then assign a single event handler to the .trigger elements in either the <head> or just before </body>, like this:

<script type="text/javascript">
    $(function() {
        $(".trigger").click(function() {
            $(this).next('.dialog').dialog("open");
        });

        $(".dialog").dialog({
            autoOpen: false,
            position: 'center' ,
            title: 'definizione',
            draggable: true,
            width: 500,
            height: 400, 
            resizable: true,
            modal: true,
            show: 'slide',
            hide: 'fade'
        });
    });
</script>

PHP while循环中的jQuery对话框

相关推荐