在加载的ajax页面中运行由ajax处理的表单?

时间:2014-01-12 21:47:49

标签: javascript ajax jquery

使用教程我发现我正在加载新页面:

$("a.nav-link").click(function (e) {
        // cancel the default behaviour
        e.preventDefault();
        // get the address of the link
        var href = $(this).attr('href');
        // getting the desired element for working with it later
        var $wrap = $('#userright');
        $wrap
            // removing old data
            .html('')
            // slide it up
            .hide()
            // load the remote page
            .load(href + ' #userright', function () {
                // now slide it down
                $wrap.fadeIn();
            });
    });

这会完美地加载选定的页面,但页面的表单本身使用ajax发送以下内容:

  var frm = $('#profileform');
frm.submit(function (ev) {
    $.ajax({
        type: frm.attr('method'),
        url: frm.attr('action'),
        data: frm.serialize(),
        success: function (data) {
            alert(data)
        }
    });

然而,这并不像在通过ajax将页面本身调用到父页面之前那样发送表单。我错过了什么吗?你能否在ajax已经调用的页面中使用ajax调用?

我还有其他问题,例如我禁用提交按钮,除非表单有任何更改,使用:

    var button = $('#profile-submit');
var orig = [];

$.fn.getType = function () {
    return this[0].tagName == "INPUT" ? $(this[0]).attr("type").toLowerCase() : this[0].tagName.toLowerCase();
}

$("#profileform :input").each(function () {
    var type = $(this).getType();
    var tmp = {
        'type': type,
        'value': $(this).val()
    };
    if (type == 'radio') {
        tmp.checked = $(this).is(':checked');
    }
    orig[$(this).attr('id')] = tmp;
});

$('#profileform').bind('change keyup', function () {

var disable = true;
$("#profileform :input").each(function () {
    var type = $(this).getType();
    var id = $(this).attr('id');

    if (type == 'text' || type == 'select') {
        disable = (orig[id].value == $(this).val());
    } else if (type == 'radio') {
        disable = (orig[id].checked == $(this).is(':checked'));
    }

    if (!disable) {
        return false; // break out of loop
    }
});

button.prop('disabled', disable);});

但是,当拉到父页面时,这也不起作用。任何帮助非常感谢!我是ajax的新手,所以请指出任何明显的错误!非常感谢提前。

更新

只是我发现的更新。我有一个表单使用:

$(document).on('mouseenter', '#profile', function() {

但是以下内容:

$(document).on('mouseenter', '#cancelimage', function() {   
$('#cancelimage').onclick=function() {
function closePreview() {
    ias.cancelSelection();
    ias.update();
    popup('popUpDiv');
    $('#imgForm')[0].reset();
} }; });

不工作。我现在明白我需要让它实现代码存在,所以我将所有代码都包装在一个鼠标悬停中用于新div,但是某些部分仍然不起作用,所以我将鼠标移到了我的图像上的取消按钮形式,但点击它时,它不会做任何它应该做的事情。

1 个答案:

答案 0 :(得分:0)

对于遇到它的其他人来说,如果你有一个分配给它的功能名称,那么无论如何都应该通过。我试图更新它,没有必要。卫生署!

function closePreview() {
        ias.cancelSelection();
        ias.update();
        popup('popUpDiv');
        $('#imgForm')[0].reset();
     };

工作得很好。