javascript - jquery on() 没有注册第一次点击

Question

我在使用 jquery.on() 时有奇怪的行为。

基本上，只是尝试创建一个时事通讯注册表单(可以动态生成，而不是在初始 DOM 加载时存在)并在 Ajax 中传递详细信息，但它没有注册提交按钮的第一次点击，这意味着成功提交，用户必须点击两次(仅在第二次点击时看到成功消息和“订阅”帖子)。

html:

<div class="newsletter-widget grid-item masonry-brick">
    <input name="Email" type="email" placeholder="Please enter your email" required />
    <input type="submit" value="Subscribe" class="newslettersubmit"/>

和 javascript(准备好文档)；

var newsletterFocus = $('.newsletter-widget').find('input[type=submit]');

$(document).on('submit', newsletterFocus, function (e) {
    e.preventDefault();
    var newsletterLinks = newsletterFocus;
    DD.newsletter.behavior(newsletterLinks);
});

以及调用对象中的函数；

DD.newsletter = {

behavior: function (item) {
    item.click(function (e) {
        e.preventDefault();
        var where = $('.newsletter-widget').find('input[type=submit]').parents('section').attr('id');
        var email = $(this).siblings('[name$=Email]'),
        emailVal = email.val();
        DD.newsletter.subscribe(email, emailVal, where);
    });
},

subscribe: function (self, email, where) {
    $.ajax({
        type: "POST",
        data: '{"email":"' + email + '", "method":"' + where + '"}',
        url: '/Subscriber/Subscribe',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            self.val(response);
        },
        failure: function (msg) {
            self.val(msg);
        }
    });
},});

我试过使用“点击”作为 on() 的操作，但每次点击都会注册一个事件，我收到了数千个表单!

感谢任何帮助!

Answer 1

将 div 容器更改为表单元素:

<form class="newsletter-widget grid-item masonry-brick">

您需要将提交事件注册到表单，而不是输入字段。下面是对表单提交的快速重构:

$(document).on('submit', '.newsletter-widget', function (e) {
  e.preventDefault();
  DD.newsletter.behavior(); //Submit the form via AJAX
});

如果您想将其与您的行为方法 Hook ，只需打开点击即可:

behavior: function () {
  var where = $('.newsletter-widget').find('input[type=submit]').parents('section').attr('id');
  var email = $(this).siblings('[name$=Email]'),
  emailVal = email.val();
  DD.newsletter.subscribe(email, emailVal, where);
}