Question

I am really confusing, I have a js file with a lot of scripts, all of them worked correctly and I just add new lines:

$('.RemoveE').click(function () {
    alert('yap');
});

but that not worked, I test it with firebug and every things is OK, also I try another browsers that not worked either, I must mention that I add new button with CSS class ="ReomoveE button red" by script, this is a part of my js include new lines and add button:

// <reference path="../jquery-1.7.1.js" />
$(document).ready(function() {

    $('.RemoveE').click(function() {
        alert('yap');
    });

    //Add new Addable div
    $('.AddNewE').click(function() {

        var Target = $('.Addable:first');
        var TargetId = $(Target).attr('id');
        var Count = $('.Addable#' + TargetId).size();
        var CloneTarget = $(Target).clone();
        CloneTarget.find('input').val('');
        CloneTarget.insertAfter('.Addable:last');
        var TargetName = $(Target).find('input').attr('name');
        var CloneName = TargetName + '[1]';
        TargetName = TargetName + '[0]';
        $(Target).find('input').attr('name', TargetName);
        $(Target).find('span[class*="field-validation"]').attr('data-valmsg-for', TargetName);
        $(CloneTarget).find('input').attr('name', CloneName);
        $(CloneTarget).append($('<input type="button" class="RemoveE button red" value="remove" />'));

        (function($) {
            $.fn.updateValidation = function() {
                var form = this.closest("form").removeData("validator").removeData("unobtrusiveValidation");
                $.validator.unobtrusive.parse(form);
                return this;
            };
        })(jQuery);

        $(Target).updateValidation();
        $(CloneTarget).updateValidation();
    });
    ...
});​

So what do you think? Where is the problem, why all functions worked correctly, but this new one no?

Answer 1

You added the handler before the element existed:

$('.RemoveE').click(function() {
    alert('yap');
});

//then later

$(CloneTarget).append($('<input type="button" class="RemoveE button red" value="remove" />'));

Try:

Adding the handler on creation:

var newInput = $('<input type="button" class="RemoveE button red" value="remove" />')

newInput.click(function(){
    alert('yap');
});

$(CloneTarget).append(newInput)

or delegation with on()

$(parent_of_RemoveE).on('click','.RemoveE',function() {
    alert('yap');
});