Question

I creating jquery code to generate specific html-blocks that contains html-controls (e.g. textbox, textarea, button) with two buttons – add new block and delete current block:

$(document).ready(function () {

    // Constants

    var SEPARATOR = "`";
    var SEPARATOR_START = "<span class='Hidden'>";
    var SEPARATOR_END = "</span>";
    var SEPARATOR_BLOCK = SEPARATOR_START + SEPARATOR + SEPARATOR_END;
    var CONTAINER = "#weContainer";

    // Initialize container
    InitializeDataContainer(CONTAINER);

    // Buttons events

    $(".AddBlock").click(function () {
        AddBlock(CONTAINER);
    });

    $(".DeleteBlock").click(function () {
        DeleteBlock(CONTAINER, GetParentId(this));
    });

    // Functions

    function GetParentId(container) {
        var id = ($(container).parent().attr("id")).replace(new RegExp("_", 'g'), "");
        return id;
    }

    function Template() {
        var uniqueId = Math.random() * 10000000;
        var template = "<div class='weBlock' id='_" + uniqueId + "_'>";
        template += "<input type='button' value='add' class=\"AddBlock\" />";
        template += "<input type='button' value='del' class=\"DeleteBlock\" />";
        template += "<br/>";
        template += "<input type='text' class='weStartDate weTextbox' />";
        template += "&nbsp;&nbsp;";
        template += "<input type='text' class='weEndDate weTextbox' />";
        template += "<br/>";
        template += "<input type='text' class='weCompany weTextbox' />";
        template += "&nbsp;&nbsp;";
        template += "<input type='text' class='weJobTitle weTextbox' />";
        template += "<br/>";
        template += "<input type='text' class='weClients weTextbox' />";
        template += "&nbsp;&nbsp;";
        template += "<input type='text' class='weProjectName weTextbox' />";
        template += "<br/>";
        template += "<textarea type='text' rows='4' cols='40' class='weProjectDesc weTextarea'></textarea>";
        template += "<br/>";
        template += "<textarea type='text' rows='6' cols='40' class='weActivities weTextarea'></textarea>";
        template += "<br/>";
        template += "<textarea type='text' rows='4' cols='40' class='weToolsTech weTextarea'></textarea>";
        template += "</div>";
        template += SEPARATOR_BLOCK;
        return template;
    }

    function GetIdFromTemplate(template) {
        var array = template.split('_');
        return array[1];
    }

    function AddBlock(container) {
        $(container).append(Template());
    }

    function DeleteBlock(container, id) {
        var content = $(container).html();
        content = content.replace(new RegExp("\<span class='Hidden'\>", "g"), "")
            .replace(new RegExp("\</span\>", "g"), "");
        var blocks = content.split(SEPARATOR);
        content = "";
        var index;
        for (var i = 0; i < blocks.length; i++) {
            if (GetIdFromTemplate(blocks[i]) != id && !IsNullOrEmpty(blocks[i])) {
                content += blocks[i] + SEPARATOR_BLOCK;
            }
            else {
                index = i;
            }
        }
        $(container).html(content);
    }

    function IsNullOrEmpty(string) {
        if (string == null || string == 'undefined' || string.length == 0) {
            return true;
        }
        else {
            return false;
        }
    }

    function InitializeDataContainer(container) {
        $(container).html(Template());
    }
});

For the first time (when page load) i created first block:

function InitializeDataContainer(container) {
        $(container).html(Template());
    }

My problem is next – buttons Add and Delete work only for this first html-block that i created when page load, but if i add new blocks in page using Add button (from this first block that works) then buttons Add and Delete from this new blocks doesn’t work!
Sorry for may be not good code, im not javascript engineer:)

Answer 1

Use the .live() instead:

$(".AddBlock").live("click", function () {
    AddBlock(CONTAINER);
});

And same for the other class – the .click() is “static” only for the elements that exists in the time of calling it, while .live() should work for any existing or future elements.