Dynamically added links not working

Question

Im having problems trying to fire an event (alert) on my script. This is the html:

<div class="dynamic-form">
    <form>
      <div class="inputs"></div>
      <a href="#" id="add">ADD</a>
      <input name="submit" type="button" class="submit" value="Submit">
    </form>
</div>

And the JS:

$(document).ready(function(){

    var i = 1;

    $('#add').click(function() {
        $('<div id="d' + i + '" class="fielddiv"><input type="text" class="field" name="dynamic[]" value="' + i + '" /><a href="#" id="remove_question">Cancella</a><hr></div>').fadeIn('slow').appendTo('.inputs');
        i++;
    });

    $('#remove_question').on("click", function(event) {
        alert('dsfsfd');
        //$('#d' + $this.attr('todel')).remove();
    });


    // here's our click function for when the forms submitted

    $('.submit').click(function(){

        var answers = [];
        $.each($('.field'), function() {
            answers.push($(this).val());
        });

        if(answers.length == 0) {
            answers = "none";
        }  

        alert(answers);

        return false;                     
    });

});

The remove question on click function should fire an alert but is not doing anything, not even an error, what am i doing wrong? Here is a jsfiddle too.

possible duplicate of [Events triggered by dynamically generated element are not captured by event handler](http://stackoverflow.com/questions/12829963/events-triggered-by-dynamically-generated-element-are-not-captured-by-event-hand) — Felix Kling, Feb 09 '13 at 21:37
You are trying to bind the event handler before the element exists. That simply does not work. It's all explained in [this section of the `.on` documentation](http://api.jquery.com/on/#direct-and-delegated-events). Also note that IDs must be unique. No two elements can have the same ID. — Felix Kling, Feb 09 '13 at 21:38
@FelixKling, I believe this question and the question about ajax are more than 1/10 of the questions in jq tag. — gdoron is supporting Monica, Feb 09 '13 at 21:43
@FelixKling, Here are two I answered in the past hour. [one](http://stackoverflow.com/q/14792335/601179). [Two](http://stackoverflow.com/a/14791043/601179). It must be stopped somehow. — gdoron is supporting Monica, Feb 09 '13 at 22:39

score 2 · Accepted Answer · answered Feb 09 '13 at 21:38

You must have delegation syntax. Also, use CLASSES NOT ID's or you'll have duplicate ID's.

Working JSfiddle:

http://jsfiddle.net/Z6x8X/2/

Code:

$(document).ready(function(){

    var i = 1;

    $('#add').click(function() {
        $('<div id="d' + i + '" class="fielddiv"><input type="text" class="field" name="dynamic[]" value="' + i + '" /><a href="#" class="remove_question">Cancella</a><hr></div>').fadeIn('slow').appendTo('.inputs');
        i++;
    });

    $(document).on("click", ".remove_question", function(event) {
        alert('dsfsfd');
        //$('#d' + $this.attr('todel')).remove();
    });


    // here's our click function for when the forms submitted

    $('.submit').click(function(){

    var answers = [];
    $.each($('.field'), function() {
        answers.push($(this).val());
    });

    if(answers.length == 0) {
        answers = "none";
    }  

    alert(answers);

    return false;

    });


});

score 0 · Answer 2 · answered Feb 09 '13 at 21:37

For dynamically added elements, you need delegated event handlers:

$(document).on('click', '#remove_question', function(event) {
    alert('dsfsfd');
});

Also, with your code it would be possible to add an infinite number of anchors with the same ID, and that won't work either, as ID's should be unique.

Dynamically added links not working

2 Answers2