Question

我有一个包含可变数量项目的页面（由Django生成，如果这有所不同），每个页面都有一个用JQuery-ui创建的可打开/关闭帮助对话框。但是，目前，当我单击相应的按钮时，我无法弄清楚如何打开正确的帮助对话框。凭借我现在所拥有的（仅在我的脚本中引用该类），当您单击任何帮助按钮时，它会打开每个帮助对话框。我现在正在做的是在页面加载上创建所有对话框，然后仅在单击时显示。我认为根据ID显示正确的对话框是有意义的，但我不知道如何将其合并到脚本中。

HTML：（基于动态生成内容的示例）

<li>
    <div class="help_expander"></div>
    <p class="toggled_helptext"><!--Text for the dialog--></p>
    <!--Actual content of the item-->
</li>
<li>
    <div class="help_expander"></div>
    <p class="toggled_helptext"><!--Text for the dialog--></p>
    <!--Actual content of the item-->
</li>

的javascript：

$(document).ready(function() {
    $("input[type=submit], input[type=button]").button();

    $(".toggled_helptext").dialog({
        autoOpen: false,
        title: "Help"
    });

    $(".help_expander").click(function() {
        $(".toggled_helptext").dialog('open');
        return false;
    });
});

Answer 1

对dynamicallay创建的内容使用委托方法如下

$("body").on("click",".help_expander",function() {
        $(".toggled_helptext").dialog('open');
        return false;
    });

<强>更新

$("body").on("click",".help_expander",function() {
        $(this).find(".toggled_helptext").dialog('open');
        return false;
    });

或

$("body").on("click",".help_expander",function() {
        $(this).children(".toggled_helptext").dialog('open');
        return false;
    });

可重新启动的JQuery-ui对话框，用于动态生成的内容

1 个答案: