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);
        }
    });
},});

我尝试使用'click'作为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
});

如果您希望将其与您的行为方法挂钩，只需打开点击：

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

Answer 2

首次单击该按钮将导致行为点击事件处理程序绑定到该按钮。直接绑定行为而不是单击事件处理程序。

替换它：

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($('.newsletter-widget input[type=submit]'));

Answer 3

它应该（我认为）应该是这样的：

DD.newsletter = {

behavior: function (item) {
        var where = $(item).parents('section').attr('id');
        var email = $(item).siblings('[name$=Email]'),
        var emailVal = email.val();  // why were you declaring this without 'var'?
        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);
        }
    });
},});

jquery on（）没有注册第一次点击

3 个答案: