如何让Ajax在Ajax生成的fanybox中执行

How to get Ajax to execute within an Ajax generated FancyBox?

本文关键字：Ajax fanybox 执行      更新时间：2023-09-26

我在使用fanybox插件时遇到了一个问题。我试图用Ajax提交一个表单，只是打印一个漂亮的小成功消息，没有验证，试图让它工作。我可以使用jQuery提交，并在FancyBox中显示任何输入的值。然而，当我尝试执行Ajax时，它只是关闭了FancyBox。我不是专家……

FancyBox的内容是使用Ajax生成的，因为它需要数据库中的数据。

以下是重要的代码部分:(文本是德语…)

使用Ajax加载到FancyBox中的文件 

    <script>
            $("#submit").click(function() {
                var login = $("#login").val();
                $.ajax({
                       type: "POST",
                       url: "handleuseredit.php",
                       cache: false,
                       data: { login:   login },
                       success: function(data){
                       if(data=='ok')
                       {
                            alert('Richtig.');
                       }
                       else
                       {
                            alert('Falsche Benutzername/Passwort Kombination.');
                       }
                    }
                });     
            });
    </script>
        <div class="login">
            <div class="widget_header">
                <h4 class="widget_header_title wwIcon i_16_wysiwyg">Benutzer Bearbeiten</h4>
            </div>
            <div class="widget_contents lgNoPadding">
            <form method="post" id="form-edit">
                <p id="errormessagehere"></p>
                <div class="line_grid">
                    <div class="g_3 g_3M"><span class="label">Benutzername</span></div>
                    <div class="g_9 g_9M">
                        <input type="text" name="login" id="login" value="<?php echo getusername($_GET['u']) ?>" class="simple_field tooltip" placeholder="Benutzername" autocomplete="off"></div>
                    <div class="clear"></div>
                </div>
                <div class="line_grid">
                    <div class="g_3 g_3M"><span class="label">Passwort</span></div>
                    <div class="g_9 g_9M">
                        ********
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="line_grid">
                    <div class="g_6"><a href="" id="submit">Abschicken</a>
                    </div>
                    <div class="clear"></div>
                </div>
                </form>
            </div>
        </div>

下面是我如何调用Fancy box

$(document).ready(function() {
            $(".fancybox").fancybox({
                'scrolling'     : 'no',
                'padding'       : 0,
                'titleShow'     : false
            });
         });

handleuseredit.php只是回显"ok"来满足数据变量的要求。

您可以使用版本2的fancybox (http://fancyapps.com/fancybox/):

)进行类似的测试。
<script>
            $("#submit").click(function() {
                var login = $("#login").val();
                $.ajax({
                       type: "POST",
                       url: "handleuseredit.php",
                       cache: false,
                       data: { login:   login },
                       success: function(data){
                       if(data=='ok')
                       {
                         $.fancybox( '<h1>Richtig.</h1>' );
                       }
                       else
                       {
                         $.fancybox( '<h1>Falsche Benutzername/Passwort Kombination.</h1>' );
                       }
                    }
                });     
            });
    </script>
相关文章：