jquery ersetzen submit button

Question

Ich habe versucht, die Schaltfläche zum Senden eines Formulars mit einem Ajax-Lader als Teil meiner Ajax-Anfrage zu ersetzen. Hier

ist der Code, den ich verwendet:

beforeSend: function() { 
    $("#submit").replaceWith("<img id='loader' width ='14px' src='../img/loader.gif'>"); 
}, 
success: function(data){ 
    $("#loader").replaceWith("<input id='submit' type='submit' class='button blue' value='Get History' />"); 

Dies funktioniert für die erste vorlegen, der Lader zeigt dann bekomme ich die Taste wieder auf Ajax vollständig, aber die Schaltfläche nicht einreicht mehr die Form?

EDIT: Hier ist die Form

<form id="history" action="temp_history.php" method="post" onsubmit="getHistory();return false;" > 
<?php 
foreach($_SESSION['contacts'] as $user => $id) {?> 
<li class="contactList"><span><input type="checkbox" name="contact[]" id="contact" value="<?php echo $id; ?>" /></span><?php echo $user; ?></li> 
<?php } ?> 
</div> 
</ul> 
    <div style="bottom: 0; position: absolute; text-align: left; margin-bottom:10px; margin-left:10px; width: 210px;"> 
    <input type="text" name="days" id="days" style="border:0; color:#8a8a8a; font-weight:bold; background: url(../img/nav_secondary_bg.png);" readonly="readonly" /> 
    <div id="slider"></div> 
    <input id="submit" type="submit" class="button blue" value="Get History" /> 
    <input type="button" class="button grey" value="Clear" /> 
    </div> 
</form> 

Gesamte Funktion:

function getHistory() { 
    //var contact = $("#contact").val() 
    var contact = new Array(); 
     $("input[@name='contact[]']:checked").each(function() { 
     contact.push($(this).val()); 
     }); 
    var days = $("#days").val() 
    $.ajax({ 
     type: 'post', 
     url: 'temp_history.php', 
     data: {contact: contact, days: days}, 
     context: document.body, 
     beforeSend: function() { 
      $("#submit").replaceWith("<img id='loader' width ='14px' src='../img/loader.gif'>"); 
     }, 
     success: function(data){ 
      $("#loader").replaceWith("<input id='submit' type='submit' class='button blue' value='Get History' />"); 
      var json = jQuery.parseJSON(data); 
      var divs = "", tabs = "", counts = 0; 

      jQuery("#gMap").gmap3({ action: 'clear' }); 
      jQuery(".marker").remove(); 

      jQuery.each(json, function(i, item) { 
       var name = item.name; 
       var userId = item.data.user; 
       jQuery.each(item.data.data, function(i, nav) { 
        var ts = nav.timestamp; 
        var lat = nav.latitude; 
        var long = nav.longitude; 

        if (lat != null && long != null) { 
         addMarker(name, counts = counts + 1, ts, lat, long, userId); 
        } 
       }); 
      }) 
     } 
    }); 

}

Answer 1

Sie müssen Ihre Ereignisse neu zu binden, nach .replaceWith(), wie der DOM wird Klasse Dies ist ein neues Element, an dem keine Ereignisse hängen.

hinzufügen nach:

$("input[type='submit'].button.blue").click(function(){ 
    getHistory(); 
}); 

Answer 2

Entweder das Ereignis an die auf den Erfolg Rückruf submit Taste erneut binden oder Ereignis Delegation .delegate