jquery的问题

Question

我创建jquery代码来生成包含带有两个按钮的html控件（例如textbox，textarea，button）的特定html块 - 添加新块并删除当前块：

$(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());
    }
});

第一次（当页面加载时）我创建了第一个块：

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

我的问题是下一步 - 按钮添加和删除仅适用于我在页面加载时创建的第一个html块，但如果我使用添加按钮（从第一个块起作用）在页面中添加新块，则按钮添加和从这个新块删除不起作用！ 对不起，可能是不好的代码，我不是javascript工程师：）

Answer 1

改为使用.live()：

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

对于另一个类也是如此 - .click()仅对于调用它时存在的元素是“静态”，而.live()应该适用于任何现有或未来的元素。

Answer 2

您的jQuery代码将事件处理程序添加到您创建的“添加/删除”按钮，使用click来执行此操作：

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

这仅影响页面中已经的HTML元素。

一种解决方案是将其更改为

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

使其也适用于稍后添加到页面 的元素。

另一种解决方案是手动将click事件处理程序添加到您动态添加到页面的任何元素：

function AddBlock(container) {
    var $template = $(Template());
    $(container).append($template);
    $template.find(".AddBlock").click, function () {
        AddBlock(CONTAINER);
    });
    $template.find(".DeleteBlock").click, function () {
        DeleteBlock(CONTAINER, GetParentId(this));
    });
}