jQuery序列化表单未初始化，

Question

I am loading a form via jquery load, which populates the content div, the form etc is showing up fine, but when I go to update the form with values it doesn't trigger my on("submit"

My jquery

<!-- process update profile form without refreshing, then load the div with the new information !-->
    $("#content").on("submit", "#update_profile_form", function() {
        alert("jfjf");
        $.ajax({
            type: $(this).attr('method'),
            url: $(this).attr('action'),
            headers: {'X-Requested-With': 'XMLHttpRequest'}, 
            data: $(this).serialize(),
            success: function(data) {
                if(data.success == "false"){
                    $.notify(data.error, "error");
                }else{
                    $.notify(data.success, "success");
                    $("#content").load("<?php echo Config::get('URL'); ?>user" + " #inner_main_content");
                }
            }
        });
            return false; <!-- important: prevent the form from submitting !-->
    });
    <!-- end process update profile form without refreshing, then load the div with the new information !-->

My form:

<form action="<?php echo Config::get('URL'); ?>/user/update_personal_information" method="POST" id="update_profile_form">
<!-- inputs here !-->
<input type="submit" class="btn vd_btn vd_bg-green col-md-offset-10" name="submit" id="submit" value="<?php echo System::translate("Update"); ?>">
    <span class="menu-icon">
        <i class="fa fa-fw fa-check"></i>
    </span>

I am simply loading the form in to content via this code:

//populate the div
$('.list-group-item').click(function(e){
    e.preventDefault();
    var link = $(this).attr('href');
    $('#content').fadeOut('slow', function(){
        $("#content").load( link + " #inner_main_content", function(){
            $('#content').fadeIn('slow');
        });
    });

The alert trigger in the on submit isn't even popping up which makes me beleive that it's not triggering, and I am receiving no errors neither. I am binding the on submit to the content id because that's the main div it loads to, so how can I iniate the form to work?

Here's the full form: http://pastebin.com/iGsPZmWT

Answer 1

I'm not sure to clearly understand the whole of your architecture, nor the precise case of your issue, but here is how I can summarize what I understand:

• #content part includes the #submit element

• #content part is first the direct content of the initial page, and is functional (triggers on submit)

• when submit happens, #content part is overwritten by the .load() process
• then #content part becomes non-functional (nothing happens on submit)

If it is really so, then the issue is pretty "normal": the submit event you attached to #content is lost when you load a new #content content (sorry for the repeat, but it comes from the id you'd choosen!).
Even if the new content also includes a #submit element, this one has no event attached to it now.

One solution is to execute the attachment again when a new content has been loaded, like this:

function attachSubmit() {
    $("#content").on("submit", "#update_profile_form", function() {
        alert("jfjf");
        $.ajax({
            type: $(this).attr('method'),
            url: $(this).attr('action'),
            headers: {'X-Requested-With': 'XMLHttpRequest'}, 
            data: $(this).serialize(),
            success: function(data) {
                if(data.success == "false"){
                    $.notify(data.error, "error");
                }else{
                    $.notify(data.success, "success");
                    $("#content").load("<?php echo Config::get('URL'); ?>user" + " #inner_main_content");
                    attachSubmit(); // <<-- here we attach event again to new content
                }
            }
        });
            return false; <!-- important: prevent the form from submitting !-->
    });
}

(note that you also have to initially invoke attachSubmit() somewhere in a $(document).ready() sequence)

Alternatively you might attach a delegated event, so once is enough. In this case, though, you'll have to attach it to a parent element of #content , instead of #content itself, something like this:

// Here #parent is supposed to be a parent of #content
// The on() method got a #submit arg, as selector for delegation
    $("#parent").on("submit", "#submit", "#update_profile_form", function() {
        alert("jfjf");
        $.ajax({
           // ... same as YOUR previous version (nothing added)
        });
            return false; <!-- important: prevent the form from submitting !-->
    });