jQuery点击事件只触发一次

Question

我对 jQuery 有点陌生，所以这可能是一个愚蠢的问题...... 我的问题是我有一个单击事件，当我单击具有类 ajax-submit 的任何按钮时会触发该事件。我正在尝试做的是一个使用 ajax 的简单多页表单。第一步效果很好，但第二次单击带有 ajax-submit 类的按钮时，它就不起作用了。

这是我用于提交 AJAX 表单的代码：

$(document).ready(function() {
$(".ajax-submit").click(function() {
var form_data = $('#unlockForm').serialize();
        $('.ajaxgif').removeClass('hide');
$.ajax({
type: "POST",
url: "formprocess.php",
data: form_data,
success: function(respuesta) {
    $('.ajaxgif').hide();
    $('#process-container').html(respuesta);
},
error: function() {
    $('.ajaxgif').hide();
    alert("Error! Please try again");
}
});
return false;
  });
});

表格代码就这么简单

<form name="unlockForm" id="unlockForm" method="post">
      <input type="text" onFocus="if(this.value=='Introduce IMEI') this.value=''" value="Introduce IMEI" onBlur="if(this.value=='') this.value='Introduce IMEI';" name="imei" class="textbox part1" id="imei">
    <input type="button" class="ajax-submit inputbutton part1" value="Next" name="simple" id="next-imei">
    </form>

两种形式的按钮都有 ajax-submit 类，我检查了，没有任何拼写错误，你可能会问为什么我不使用提交按钮，好吧，我试过了，但我没弄明白如何正确管理提交事件，它一直在为页面充电。

Answer 1

click 事件未附加到新的 .ajax-submit 元素。
您需要使用委托事件，例如 on 或 delegate 来执行此操作。

$("#process-container").on('click','.ajax-submit',function() {
    var form_data = $('#unlockForm').serialize();
    $('.ajaxgif').show(); 
    // I think you didn't really meant: $('.ajaxgif').removeClass('hide');
    $.ajax({
        type: "POST",
        url: "formprocess.php",
        data: form_data,
        success: function(respuesta) {
            $('.ajaxgif').hide();
            $('#process-container').html(respuesta);
        },
        error: function() {
            $('.ajaxgif').hide();
            alert("Error! Please try again");
        }
    });
    return false;
});

委托事件函数表：

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(document).on(events, selector, data, handler);        // jQuery 1.7+

on有用docs：

如果选择器被省略或为空，则事件处理程序被称为 直接或直接绑定。每次发生事件时都会调用处理程序 发生在被选元素上，是否直接发生在 元素或来自后代（内部）元素的气泡。

当提供选择器时，事件处理程序被称为 委托。事件直接发生时不调用处理程序 绑定元素，但仅适用于后代（内部元素） 匹配选择器。 jQuery 将事件从事件目标向上冒泡 到处理程序附加的元素（即，最里面 最外层元素）并运行该处理程序的任何元素 路径匹配选择器。

事件处理程序仅绑定到当前选定的元素；他们 在您的代码调用 .on() 时必须存在于页面上。 为了确保元素存在并且可以被选择，执行事件 绑定在文档就绪处理程序中的元素 页面上的 HTML 标记。如果新的 HTML 被注入到页面中， 在新的 HTML 之后选择元素并附加事件处理程序 放置在页面中。或者，使用委托事件附加事件 处理程序，如下所述。

委托事件的优点是它们可以处理来自 以后添加到文档中的后代元素。经过 选择一个保证在该时间存在的元素 附加了委托事件处理程序，您可以使用委托事件 避免频繁附加和删除事件处理程序的需要。这 element 可以是视图中的容器元素 例如，模型-视图-控制器设计，或记录事件 处理程序想要监视文档中的所有冒泡事件。这 文档元素在文档头部之前可用 加载任何其他 HTML，因此在此处附加事件是安全的 等待文档准备好。