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：

如果省略selector或为null，则将事件处理程序称为   直接或直接约束。每次事件都会调用该处理程序   发生在所选元素上，无论它是直接出现在   来自后代（内部）元素的元素或气泡。

提供选择器时，事件处理程序称为   授权。直接在事件发生时不会调用处理程序   绑定元素，但仅适用于后代（内部元素）   匹配选择器。 jQuery从事件目标起泡事件   到附加处理程序的元素（即最里面的）   最外面的元素）并为其中的任何元素运行处理程序   匹配选择器的路径。

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

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

jQuery click事件只触发一次

1 个答案: