Question

这可能是一个愚蠢的编码问题，但我已经用Google搜索了几天，尝试重建我的代码几次，而且我总是处于同样的情况。

我的页面结构是这样的：

/控制器/

   |--Menu_Controller.php

/页/

   |--ContentA.php

   |--ContentB.php

的index.php

我有一个ajax脚本，可以调用和刷新我的Index.php中的Content区域

＆＃13;

<script type="text/javascript" language = "javascript">
    (function($)
    {
        $(document).ready(function()
        {
            var mid = "<?php echo $MainMenu;?>";
            var sid = "<?php echo $SubMenu;?>";
            $.ajaxSetup(
                {
                    cache: false,
                    type: 'post',
                    data: {mid:mid,sid:sid,},
                });
            var $container = $("#Content");
            $container.load("controller/Menu_Controller.php");
            var refreshId = setInterval(function()
            {
                $container.load('controller/Menu_Controller.php');
            }, 5000);
        });
    })(jQuery);

</script>

＆＃13;

在我加载的内容中，我有一个表单，当我点击提交按钮时，它会触发另一个ajax脚本。

＆＃13;

<script>
    // Attach a submit handler to the form
    $( "#searchForm" ).submit(function( event ) {
        alert('Test');
        });
    });
</script>

＆＃13;

但只有一个或另一个ajax工作:( 我确定我把代码放在错误的位置或者是愚蠢的东西。

感谢您的帮助！亚历

Answer 1

我已经完成了一些谷歌搜索。我相信我的问题是事件委托，并且ajax负载会在后台更改代码。到目前为止，我理解这个问题并且我已经多次修改了我的代码，但我的结果仍然是相同的。重新加载（ajax加载）我的内容后，我的内容中提交的表单不起作用。

这是我到目前为止所做的改变：

加载/重新编码

<script type="text/javascript" language = "javascript">
    (function($)
    {
        $(document).ready(function()
        {
            var mid = "<?php echo $MainMenu;?>";
            var sid = "<?php echo $SubMenu;?>";
            var $container = $("#Content");
            //$container.load("controller/Menu_Controller.php",{mid:mid,sid:sid}); // Initial load for testing deactivated!
            var refreshId = setInterval(function()
            {
                $container.load("controller/Menu_Controller.php",{mid:mid,sid:sid});
            }, 10000);
        });
    })(jQuery);
</script>

显示模态窗口

<script type="text/javascript" language = "javascript">
    $( window ).load(function() {
        $('#Content').on('click','.show',function(event) {
            $(".backdrop").show( "fade", { direction: "left"  }, 150 );
            $(".modal-window").show( "fade", {direction: "left" }, 700 );
        });

        $(".close").click(function(){
            $(".backdrop").hide( "fade", { direction: "left"  }, 700 );
            $(".modal-window").hide( "fade", { direction: "left"  }, 700 );
        });
    });
</script>

提交表单数据并以模态显示

<script type="text/javascript" language = "javascript">
    $("form.myform").on('submit', function(event) {
        event.preventDefault(); //prevent default action
        var request_method = $(this).attr("method");
        var form_data = $(this).serialize();
        
        $.ajax({
            url : 'include/modal_post_receiver.php',
            type: request_method,
            data : form_data
        }).done(function(data){ //
            $("#modal").html(data);
        });
    });
</script>

我做错了什么？感谢您的支持。

亚历

页面中有多个Ajax脚本

1 个答案: