2

jquery.on（）を使用すると奇妙な動作をします。

基本的に、ニュースレターのサインアップフォーム（動的に生成でき、最初のDOMロードでは存在しない）を作成して詳細をAjaxに渡そうとしますが、送信ボタンの最初のクリックは登録されません。つまり、ユーザーは正常に送信できます。 2回クリックする必要があります（2回目のクリックで成功メッセージと「サブスクライブ」投稿のみが表示されます）。

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

ボタンを最初にクリックすると、ビヘイビアクリックイベントハンドラがボタンにバインドされます。クリックイベントハンドラーではなく、動作を直接バインドします。

これを置き換えます：

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 に答える