jQuery使用$ .ajax生成的表单

时间:2011-04-26 17:13:09

标签: jquery ajax forms

jQuery新手这里有问题...

我正在做一些服务器端验证,并使用'confirm'&amp ;;生成一个新表单。使用$ .ajax调用'取消'按钮。这工作正常,但我想做同样的事情来处理创建的表单上的确认/取消按钮,但这不起作用。

'confirm'按钮没有调用新的$ .ajax调用,我怀疑它是由先前的$ .ajax调用动态生成的,就jQuery而言它不是“实时”。

我的jQuery javascript代码是: -

$(document).ready(function () {
    //if submit button is clicked on order form
    $('#submit').click(function () {

        //show the loading sign
        $('.loading').show();


        $.ajax({
            url: 'inc/ajax_checkorder.asp',
            type: "GET",
            data: data,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            cache: false,
            success: function (response) {
                var message = (typeof response.jsonresp) == 'string' ? eval('(' + response.jsonresp + ')') : response.jsonresp;
                $('#message').empty();
                if (message[0].ok == '1') {
                    $('#intromsg').hide('slow');
                }
                $('#message').append(message[0].msg);
            },
            error: function (xhr, err) {
                alert("readyState: " + xhr.readyState + "\nstatus: " + xhr.status);
                alert("responseText: " + xhr.responseText);
            }
        });

        //cancel the submit button default behaviours
        return false;
    });

    //if submit button is clicked on confirmation form
$('#confirm').live('confirm', function () {

    $(this).click(function () {

        //show the loading sign
        $('.loading').show();

        $.ajax({
            url: 'inc/ajax_sendorder.asp',
            type: "GET",
            data: data,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            cache: false,
            success: function (response) {
                var message = (typeof response.jsonresp) == 'string' ? eval('(' + response.jsonresp + ')') : response.jsonresp;
                $('#message').empty();
                if (message[0].ok == '1') {
                    $('#ordermsg').hide('slow');
                }
                $('#message').append(message[0].msg);
            },
            error: function (xhr, err) {
                alert("readyState: " + xhr.readyState + "\nstatus: " + xhr.status);
                alert("responseText: " + xhr.responseText);
            }
        });
        return false;
    });
  });
});

感谢您的帮助!

EPX

4 个答案:

答案 0 :(得分:0)

你的怀疑是正确的。您需要unbind然后rebind“确认”按钮的点击事件,因为第一个事件绑定到dom上不再存在的事件(即使它具有相同的ID)。

答案 1 :(得分:0)

你是对的,.click()仅适用于当前存在的内容。最好的办法是将你的.click()中的东西放入包装函数并在你的document.ready中调用它,然后在你的.ajax回调中再次调用它,将它重新应用到返回的内容。

答案 2 :(得分:0)

我在执行过程中没有检查过代码,但如果你将#confirm绑定封装到另一个函数中并在第一次调用成功时调用它,它可能会有效。

function bindConfirm() {
    $('#confirm').live('confirm', function () {

        $(this).click(function () {

            //show the loading sign
            $('.loading').show();

            $.ajax({
                url: 'inc/ajax_sendorder.asp',
                type: "GET",
                data: data,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                cache: false,
                success: function (response) {
                    var message = (typeof response.jsonresp) == 'string' ? eval('(' + response.jsonresp + ')') : response.jsonresp;
                    $('#message').empty();
                    if (message[0].ok == '1') {
                        $('#ordermsg').hide('slow');
                    }
                    $('#message').append(message[0].msg);
                },
                error: function (xhr, err) {
                    alert("readyState: " + xhr.readyState + "\nstatus: " + xhr.status);
                    alert("responseText: " + xhr.responseText);
                }
            });
            return false;
        });
      });
    });
}

之后,只需在ajax调用成功时调用bindConfirm()。问候。

答案 3 :(得分:0)

使用livequery jquery插件,它会让你的生活更轻松.. livequery

附加到即时创建数据的请求。