页面中有多个Ajax脚本

Question

It maybe a stupid coding issue, but I have googled since a couple days, tried to rebuild my code a few times, and I always end up in the same situation.

My page structure is something like that:

/controller/

   |--Menu_Controller.php

/pages/

   |--ContentA.php

   |--ContentB.php

/index.php

I have an ajax script that calls and refreshes the Content area in my Index.php

<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>

And in my loaded content, I have a form which should triggers another ajax script when I hit the submit button.

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

But only the one or the other ajax works :( I'm sure I placed the code maybe at the wrong spots or something stupid.

Thanks for your help! Alex

</div>

Answer 1

I've done some more google search. I believe my issue is event delegate, and that the ajax load changes the code in the background. So far I understand the issue and I have modified my code several times, but my result is still the same. After reloading (ajax load) my content, the form submit in my content doesn't work.

Here is, what I changed so far:

load/relaod code

<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>

show modal window

<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>

submit form data and display in modal

<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>

What am I doing wrong? Thanks for any support.

Alex

</div>