jquery的问题

Question

我创建 jquery 代码来生成包含带有两个按钮的 html 控件（例如文本框、文本区域、按钮）的特定 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);
});

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

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

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