Ajax提交脚本全局

Question

I have this piece of code. this code has to be inside every new loaded ajax page. cause if its outside, it wont work.

example:

<div> Loaded form here , including the script </div>  <- works
<div><div> Loaded form here , </div> script is here </div>  <- do not work

Q: How can i make it able to work without the need to put this script on every of my ajax pages?

code:

  <script>
    $("form").on("submit",function(e) {

        e.preventDefault();


        var btn= $(this).find("input[type=submit]:focus");
        $('<input>').attr({
            type: 'hidden',
            name: btn.attr('name'),
            value: btn.val()
        }).appendTo('form');

        action =  $("form").attr('action');
        $.post(action, $(this).serialize(), function(data) {
            $(".main_center").html(data);

        });
        return false; // prevent normal submit
    });

</script>

if the script is in the loaded file, it will proccess correctly. but if it isnt, it will just refresh the page. cause the loaded file will not find the script that is ment to be used.

Answer 1

Is your script in the .main_center div? If so then the returned data will replace it - hence you need to include your script in the data returned in your ajax call.

Putting the script into a common js file included in your footer works (I've done it myself) so the fault is almost certainly with the structure of your document and the way you are replacing content.

Will need to see a more of the actual code to properly advise you.

[Edit] Have you tried

<div class="main_center">
    <div><form> ....</form></div>
</div>
<script>
    $(document).on("submit","form", function(e){ ... });
</script>

This binds the script to the document and calls it whenever a form is submitted, including forms loaded after the page has been generated