Trigger the event after making the HTML object in JQuery

Question

I want an event to be triggered after the creation of the corresponding HTML object (href in my case).

I've written this code:

$(document).ready(function() {
    $('body').on('click', '#stats-link', function(e) {
        console.log('TRIGGERED'); // nothing is logged
        e.preventDefault();
        $.post('stats.php', {'email': $('#email').val()}, function() {
            window.location = $(this).attr('href');
        });
    });

    $('#submit_button').click(function(e) {
        e.preventDefault();
        ...
        $('#info').html('<p class="desc"><a href="stats.php" id="stats-link">bla bla bla</a></p>');
        ...
    });
});

So, I make a href object identified by stats-link in the #submit_button function, then I want him to be triggered in the corresponding function (i.e., $('body').on(...), but it doesn't happen. What am I doing wrong?

If #submit_button is a submit button, you need to cancel that too: $('#submit_button').click(function(e) { e.preventDefault(); - laso you now ajax posts to stats.php then change the location to the same file. That does not seem right — mplungjan
– mplungjan, Commented Oct 22, 2014 at 9:06

K K · Accepted Answer · 2014-10-22 09:25:44Z

2

Did you missed this line:

$('#stats-link').trigger('click');

This will trigger the click event. The code you shared only binds the event. You need to trigger it.

JS:

$(document).ready(function () {
    $('body').on('click', '#stats-link', function (e) {
        e.preventDefault();
        alert('clicked')
        $.post('stats.php', {
            'email': $('#email').val()
        }, function () {
            window.location = $(this).attr('href');
        });
    });

    $('#submit_button').click(function (e) {
        e.preventDefault();
        $('#info').html('<p class="desc"><a href="stats.php" id="stats-link">bla bla bla</a></p>');
        $('#stats-link').trigger('click'); //This is where you trigger the click.
    });
});

Working Demo: http://jsfiddle.net/lotusgodkk/artaq4xj/

edited Oct 22, 2014 at 9:25

answered Oct 22, 2014 at 9:07

K K

18.2k4 gold badges33 silver badges39 bronze badges

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

8 Comments

redcrow Over a year ago

Where do I need to put that?

K K Over a year ago

You need to put it after you append that href object or anchor link.After this line: $('#info').html('<p class="desc"><a href="stats.php" id="stats-link">bla bla bla</a></p>');

K K Over a year ago

@f_ficarola Check the demo, let me know if this is what you want.

K K Over a year ago

So where is the problem? Remove the trigger line and it should work on your click too.

K K Over a year ago

Yeah. Can you share your website link where you have this code?

|

Lochemage · Accepted Answer · 2014-10-22 09:00:42Z

1

What is e? Are you sure the click event isn't actually working, but just giving you a script error and bailing out before it does anything? Your callback function does not define the passed in event parameter e.

$('body').on('click', '#stats-link', function() { // <-- No e parameter supplied.
        e.preventDefault();  // <---- What is e?
        ...
}

answered Oct 22, 2014 at 9:00

Lochemage

3,97413 silver badges11 bronze badges

1 Comment

redcrow Over a year ago

Yes, thank you for your correction... I've forgotten the e in the function, but that wasn't the problem, the situation is still the same. I've tried to put console.log("AAAAAAAAAAAAAA");, but the console doesn't print anything and I don't have any error.

Cybercraft · Accepted Answer · 2014-10-22 09:08:21Z

1

Your preventDefault() parameter is lacked :

$('body').on('click', '#stats-link', function(event) {
    event.preventDefault();
    $.post('stats.php', {'email': $('#email').val()}, function() {
        window.location = $(this).attr('href');
    });
});

answered Oct 22, 2014 at 9:08

Cybercraft

544 bronze badges

1 Comment

redcrow Over a year ago

Yes, I've already updated my post after the Lochemage's answer. I forgot the write e, but the situation does not change.

Collectives™ on Stack Overflow

Trigger the event after making the HTML object in JQuery

3 Answers 3

8 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related