2

使用 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() 的操作，但这会在每次点击时注册一个事件，并且我会提交数千个表单！

任何帮助表示赞赏！

4

3 回答 3

2

将 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);
}
于 2012-11-05T17:52:28.460 回答
1

第一次单击按钮将导致行为单击事件处理程序绑定到按钮。直接绑定行为，而不是在 click 事件处理程序中。

替换这个：

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]'));
于 2012-11-05T17:54:40.710 回答
0

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

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);
        }
    });
},});
于 2012-11-05T17:57:00.033 回答