jquery on() not registering first click

Question

I am having strange behaviour when using jquery.on().

Basically, just trying to create a newsletter signup form (can be dynamically generated and not there on initial DOM load) and pass the details through in Ajax but it is not registering the first click on the submit button meaning that to successfully submit, the user has to click twice (only seeing the success message and 'subscribe' post on 2nd click).

The 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"/>

and the javascript (in document ready);

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

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

and the functions within an object that are called;

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

I've tried using 'click' as the action for on() but this registers an event on each click and i get thousands of forms submitted!

Any help appreciated!

Why don't you use the good ol' <form action='...' ? After all, that's what a form should look like.. — Christoph
– Christoph, Commented Nov 5, 2012 at 17:50
It looks like you aren't binding your click handler until you submit the form for the first time. So your subscribe function isn't called until the second click. — Shmiddty
– Shmiddty, Commented Nov 5, 2012 at 17:51
why not .on('submit','.newsletter-widget > input[type=submit]', function(){}); or even .on('submit','form',function(){});, after all, it's the form that gets submitted, is it not? — Elias Van Ootegem
– Elias Van Ootegem, Commented Nov 5, 2012 at 17:52
I have never used .on() with the sumbit action. Did you try $(document).on('click', newsletterFocus, function (e) { . . .});? Or $('.newsletter-widget').on('click', 'input[type=submit]', function (e) { . . .});? — JoeFletch
– JoeFletch, Commented Nov 5, 2012 at 17:53

Matthew Blancarte · Accepted Answer · 2012-11-05 18:02:44Z

2

Change the div container to a form element:

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

You'll want to register the submit event to the form, not the input field. Here's a quick refactor of your form submission:

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

If you wanted to hook this up to your behavior method, just unwrap the click:

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

edited Nov 5, 2012 at 18:02

answered Nov 5, 2012 at 17:52

Matthew Blancarte

8,3112 gold badges27 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Shmiddty Over a year ago

This wouldn't solve the problem, since it's behavior that defines the click handler. It would still require two clicks to get to subscribe

Matthew Blancarte Over a year ago

I just refactored it so it doesn't need a click event binding.

Guffa · Accepted Answer · 2012-11-05 17:54:40Z

1

The first click on the button will cause the behaviour click event handler to be bound to the button. Bind the behaviour directly instead of in the click event handler.

Replace this:

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

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

with:

DD.newsletter.behavior($('.newsletter-widget input[type=submit]'));

answered Nov 5, 2012 at 17:54

Guffa

703k111 gold badges760 silver badges1k bronze badges

1 Comment

Thomas Crossman Over a year ago

this works but because we are loading the newsletter 'widget' in on subsequent pages using infinite scroll it doesnt work when it is not on the initial DOM load, hence using .on()

Shmiddty · Accepted Answer · 2012-11-05 17:57:00Z

0

It should probably (I think) be something like this:

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

answered Nov 5, 2012 at 17:57

Shmiddty

13.9k1 gold badge38 silver badges52 bronze badges

1 Comment

Thomas Crossman Over a year ago

this is the one, thanks a lot! declaring the emailVal var without the var was also a typo so +1 for that notice too :)

Collectives™ on Stack Overflow

jquery on() not registering first click

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related