jQuery的单击事件只是触发一次 [英] jQuery click event just trigger once

问题描述

我有点新的jQuery的，所以这可能是一个愚蠢的问题... 我的问题是，我有触发，当我点击任何按钮，用类AJAX提交click事件。我正在试图做的是用ajax简单的多页表格。它的伟大工程的第一步，但第二次我点击一个按钮，用AJAX提交的类，它不会工作。

I'm kinda new to jQuery, so this may be a silly question... My problem is that i have a click event that triggers when I click any button with the class ajax-submit. What I'm trying to do is a simple multi-page form using ajax. It works great on the first step, but the second time I click on a button with the ajax-submit class, it won't work.

下面是code，我使用了AJAX的形式提交：

Here is the code I'm using for the AJAX form submitting:

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

和形式codeS是简单的像这样

And the form codes are simple like this

<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提交课，我检查，我没有任何错字错，你可能会问，为什么我不使用提交按钮，好了，我试过，但我没有想通了如何正确管理提交的事件，它不停地充电的页面。

In both forms the buttons have the ajax-submit class, I checked and I don't have any typo mistake, you may ask why I don't use submit buttons, well, I tried but I didn't figured out how to manage the submit event correctly, it kept recharging the page.

推荐答案

在点击事件不会附加到新的阿贾克斯提交元素。
您将需要在使用委托事件像 或代理这样做。

The click event is not attached to the new .ajax-submit elements.
You will need to use delegate event like with on or delegate to do so.

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

表的委托事件功能：

Table of delegate event functions:

$(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+

在实用文档：

如果选择器被省略或为空，事件处理程序被称为   直接或者直接绑定。该处理器将被调用每次事件   发生在所选择的单元，它不论是直接发生在   元素或气泡的后裔（内部）元素。

If selector is omitted or is null, the event handler is referred to as direct or directly-bound. The handler is called every time an event occurs on the selected elements, whether it occurs directly on the element or bubbles from a descendant (inner) element.

当被提供一个选择器，该事件处理程序被称为   委派。当事件直接发生的处理程序不叫   结合的元素，但仅用于后代（内元件），该   匹配选择。 jQuery的气泡事件目标向上事件   到那里的处理程序相连接的元件（即，最内到   最外层的元素）和运行的处理程序沿着到任何元件   路径匹配的选择。

When a selector is provided, the event handler is referred to as delegated. The handler is not called when the event occurs directly on the bound element, but only for descendants (inner elements) that match the selector. jQuery bubbles the event from the event target up to the element where the handler is attached (i.e., innermost to outermost element) and runs the handler for any elements along that path matching the selector.

事件处理程序只能绑定到当前选定的元素;他们   必须存在于网页上的时候你的code使得调用。对（）。   为了保证元件是present并且可以选择，执行事件   文档准备好处理程序内绑定为那些中的元素   页面上的HTML标记。如果新的HTML被注入到该页面，   选择元素和附加的事件处理程序后，新的HTML是   放入页面。或者，使用委派事件附加一个事件   处理程序，如下所述。

Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(). To ensure the elements are present and can be selected, perform event binding inside a document ready handler for elements that are in the HTML markup on the page. If new HTML is being injected into the page, select the elements and attach event handlers after the new HTML is placed into the page. Or, use delegated events to attach an event handler, as described next.

委派事件具有的优点是，它们可以处理来自事件   被添加到文档在稍后的时间派生元素。通过   采摘是保证将present当时的元素的   委派的事件处理程序连接，可以使用委派事件   避免需要频繁地安装和取下的事件处理程序。本   元件可以是鉴于一个容器元素   模型 - 视图 - 控制器设计，例如，文件或如果事件   处理程序要监视文档中的所有事件冒泡。该   文档元素是在文档的前头部可用   装载任何其它HTML，所以它是安全的有连接事件，而不   等待文件准备就绪。

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers. This element could be the container element of a view in a Model-View-Controller design, for example, or document if the event handler wants to monitor all bubbling events in the document. The document element is available in the head of the document before loading any other HTML, so it is safe to attach events there without waiting for the document to be ready.

这篇关于jQuery的单击事件只是触发一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！