Question

我尝试用ajax加载器替换表单的提交按钮，作为我的ajax请求的一部分。

以下是我使用的代码：

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'  />");

这适用于第一次提交，加载器显示然后我在ajax完成按钮，但按钮不再提交表单？

编辑：这是表格

    <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>

整个功能：

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

您需要在.replaceWith()之后重新绑定您的事件，因为DOM会将此类视为一个没有附加事件的新元素。

之后添加：

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

Answer 2

将事件重新绑定到成功回调中的submit按钮或使用事件委派.delegate

jquery替换提交按钮

2 个答案: