在提交中使用javascript和ajax调用创建表单

Question

我的ajax通话中有一个小问题，我将解释：

我有一个页面（article.php），其中有一个按日期和公司查找项目的页面，我打电话给ajax页面“ action / SearchArticle.php”，该页面返回了结果，我在页面文章上张贴了海报.php。

在结果中，我修改了一个按钮，当我单击时，我在弹出式窗口中使用Javascript创建了另一个要更改的列，这是我的问题：我想当我在此弹出式窗口中单击Submit时，对PHP页面进行ajax调用修改部分，但不起作用。

这是我做的

$(document).ready(function () {
    $('#result #modifier').click(function () {
        // récuperer le id article
        var popINC = $(this).attr('rel');
        // récuperer commentaire article
        var popComment = $("#result #comment" + popINC).text();
        //créer le commentaire
        var comment = '<label for="comment">Commentaire</label><input type="text" id ="comment" name="comment" value="' + popComment + '"/>';
        //créer une checkbox pour id_article
        var inpInc = "<input type='checkbox' id='flag' name='flag[]' value='" + popINC + "'>" + popINC;
        //construire le formulaire avec le id_article et commentaire
        var contenu = '<form action="" method="post" id="changeFlag"><ul><li>' + inpInc + '</li><li>' + comment + '</li><button type="submit">Chercher</button></ul></form>';
        // Afficher popup
        $('#' + popID).html(contenu).fadeIn().css({
            'width': Number(popWidth)
        });
        var popMargTop = ($('#' + popID).height() + 80) / 2;
        var popMargLeft = ($('#' + popID).width() + 80) / 2;
        $('#' + popID).css({
            'margin-top': -popMargTop,
            'margin-left': -popMargLeft
        });
        $('body').append('<div id="fade"></div>'); //Ajout du fond opaque noir
        //Apparition du fond - .css({'filter' : 'alpha(opacity=80)'}) pour corriger les bogues de IE
        // Cacher la page HTML
        $('#fade').css({
            'filter': 'alpha(opacity=80)'
        }).fadeIn();
        return false;
    });
    $('a.close, #fade').live('click', function () { //Au clic sur le bouton ou sur le calque...
        $('#fade , .popup_block').fadeOut(function () {
            $('#fade, a.close').remove(); //...ils disparaissent ensemble
        });
        return false;
    });
    // Quand je clique sur mon formulaire modifier article crée dans la 1er partie
    $("#changeFlag").submit(function () {
        var dataString = $(this).serialize();
        $.ajax({
            type: "POST",
            url: "../action/test.php",
            dataType: 'html',
            data: dataString,
            success: function (response) {
                if (response) {
                    alert('dede');
                } else {
                    $("#result").text("Errodr");
                }
            }
        });
        return false;
    });
 });

结果：当我单击提交时，弹出页面会刷新，然后我什么都没有！

先感谢您

Answer 1

问题是，在创建changeFlag表单之前已注册了提交事件处理程序。 因此，您需要更改提交事件注册以使用事件委托模型。

如果使用jQuery <1.7，请使用.live（）

$("#changeFlag").live('submit', function () {
    var dataString = $(this).serialize();
    $.ajax({
        type: "POST",
        url: "../action/test.php",
        dataType: 'html',
        data: dataString,
        success: function (response) {
            if (response) {
                alert('dede');
            } else {
                $("#result").text("Errodr");
            }
        }
    });
    return false;
});

如果jQuery> = 1.7，请使用.on（）

$(document).on('submit', '#changeFlag', function() {
    var dataString = $(this).serialize();
    $.ajax({
                type : "POST",
                url : "../action/test.php",
                dataType : 'html',
                data : dataString,
                success : function(response) {
                    if (response) {
                        alert('dede');
                    } else {
                        $("#result").text("Errodr");
                    }
                }
            });
    return false;
});