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!

Answer 1

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