jquery的问题
jquery的问题
提问于 2011-08-04 19:10:28
我创建了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 += " ";
template += "<input type='text' class='weEndDate weTextbox' />";
template += "<br/>";
template += "<input type='text' class='weCompany weTextbox' />";
template += " ";
template += "<input type='text' class='weJobTitle weTextbox' />";
template += "<br/>";
template += "<input type='text' class='weClients weTextbox' />";
template += " ";
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());
}我的问题是下一步-按钮Add和Delete只适用于我在页面加载时创建的第一个html-block，但如果我使用add按钮在页面中添加新的块(从这个有效的第一个块开始)，那么按钮Add和Delete从这个新块不起作用！对不起，可能是不好的代码，我不是javascript工程师：)
回答 2
Stack Overflow用户
回答已采纳
发布于 2011-08-04 19:12:49
请改用.live()：
$(".AddBlock").live("click", function () {
AddBlock(CONTAINER);
});对于另一个类也是如此- .click()只对调用它时存在的元素是“静态的”，而.live()应该对任何现有的或未来的元素起作用。
Stack Overflow用户
发布于 2011-08-04 19:13:56
您创建的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));
});
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6940332
复制相关文章
相似问题
腾讯云开发者
