Question

我遇到了一个问题，我希望你可以帮助我。我有一个用slidetoggle（）打开的表单;奇迹般有效。元素#dialog中的表单执行AJAX Post提交。一切都是完美的。

问题在于：提交表单时，slidetoggle似乎失去了状态，然后当用户随后单击触发slidetoggle的按钮时，没有任何反应。如果我在成功函数中刷新主页，那么一切都按预期工作 - 但这似乎首先打败了AJAX Post提交的目的。这是我的代码：

            $.ajax(
            {
                type: "POST",
                url: "{U_NEW}",
                data: dataString,
                success: function()
                    {
                        $('#reply-dialog').html("<div id='succes'></div>");
                        $('#succes').html("<h2>{L_DRAFT_SAVED}</h2>")
                        .hide()
                        .fadeIn(800, function()
                            {
                            $('#succes')
                        });

                        $('#succes').delay(2000).slideUp(500, function()
                            {
                                    location.reload();
                                    parent.conversations.location='{U_CONVERSATIONS}';
                            });
                    }
            });

触发slidetoggle的代码：

$(function()
{
        $("#new").click(function ()
        {
                $("#dialog").slideToggle("100");
        });
});

#dialog div

        <div id="dialog">
          <div class="ui-state-highlight ui-corner-all" style="padding: .7em;">
                <div class="ui-widget">
                    <form action="">
                      <fieldset style="border: none;">
                        <h2>{L_NEW_MESSAGE}</h2>
                        <label for="recipient" id="recipient_label">{L_RECIPIENT}: <span class="small-font">{L_RECIPIENT_EXPLAIN}</span></label></label>
                        <br />
                        <input type="text" name="recipient" id="recipient" value="" class="text ui-widget-content ui-corner-all" />
                        <label class="error" for="recipient" id="recipient_error">{L_FIELD_REQUIRED}</label>
                        <label class="error" for="recipient" id="recipient_name_error">{L_RECIPIENT_NOT_FOUND}</label>
                            <br />
                        <label for="subject" id="subject_label">{L_SUBJECT}:</label>
                        <br />
                        <input type="text" name="subject" id="subject" class="text ui-widget-content ui-corner-all" />
                        <label class="error" for="subject" id="subject_error">{L_FIELD_REQUIRED}</label>
                            <br />
                        <label for="message" id="message_label">{L_MESSAGE}:</label>
                        <br />
                        <textarea name="message" style="width: 99%;" rows="10" id="message" class="text ui-widget-content ui-corner-all"></textarea>
                        <label class="error" for="message" id="message_error">{L_FIELD_REQUIRED}</label>

                            <input type="submit" name="submit" id="button" value="{L_SEND_MESSAGE}" />
            <input type="submit" name="draft" id="draft" value="{L_SAVE_AS_A_DRAFT}" />

                      </fieldset>
                    </form>
                    </div>
            </div>
            <br />
        </div>

Answer 1

使用live（），delegate（）或on（），具体取决于您的JQuery版本（从旧版本到更新版本）绑定到从AJAX调用加载的DOM对象

e.g。 $（document）.on（“＃new”，“click”，function（）

在这里阅读更多内容： http://api.jquery.com/on/

AJAX Post上的slidetoggle重置状态

1 个答案: