用JavaScript創建形式和Ajax調用在提交

Question

我在我的Ajax調用一個小問題，我將解釋：

我有一個頁面（article.php）那裏有一個會找項目按日期和公司，我打電話給一個ajax頁面「action/SearchArticle.php」，它將結果返回給我，並在我的頁面article.php上顯示海報。

在結果中，我有一個按鈕被修改，當我點擊我創建另一個在彈出與JavaScript與列改變，並有我的問題：我想當我點擊提交在這個彈出我做一個Ajax調用到一個PHP頁面來修改部分，但它不起作用。

這是我如何做

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