Question

我正在通过jquery load加载一个表单，它填充内容div，表单等显示正常，但是当我用值更新表单时它不会触发我的on("submit" < / p>

我的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 !-->

我的表格：

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

我只是通过以下代码将表单加载到内容中：

//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');
        });
    });

提交中的警报触发器甚至不会弹出，这使我感到它没有触发，我也没有收到任何错误。我将提交绑定到内容ID，因为它是它加载的主要div，所以如何让表单工作？

以下是完整格式：http://pastebin.com/iGsPZmWT

Answer 1

我不确定清楚地了解您的整个架构，也不清楚您的问题的具体情况，但这是我如何总结我的理解：

#content部分包含#submit元素
#content部分首先是初始页面的直接内容，并且功能正常（提交时触发）
提交时，#content部分会被.load()进程
然后#content部分变得无法运作（提交时没有任何反应）

如果确实如此，则问题非常“正常”：加载新submit内容后，您#content附加的#content事件将丢失/ strong>（对不起重复，但它来自您选择的ID！）即使新内容还包含#submit元素，此元素现在也没有附加事件。

一种解决方案是在加载新内容后再次执行附件，如下所示：

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;  }); }

（请注意，您还必须先在attachSubmit()序列中的某处调用$(document).ready()

或者你可以附加一个委托事件，所以一旦足够。但是，在这种情况下，您必须将其附加到#content的父元素，而不是#content本身，如下所示：

// 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;  });

Jquery序列化形式不是iniating，

1 个答案: