Jquery/javascript:加载页面时不需要的重复函数
Jquery/javascript: Unwanted duplicate function when loading page
我有一个基于用户通过单击功能创建某些div的Web应用程序。当用户添加div时,我还赋予他们删除所述功能的能力。每次用户添加div 时,它都会被推送到数组中。然后用户可以保存数组并在返回时加载它。
删除div的函数嵌套在要添加的函数中,因为这是我发现使函数工作的唯一方法。
我遇到的问题是,我还必须在加载函数中调用 delete 函数,以使删除按钮在单击添加按钮之前工作。我尝试只是在任何一个函数之外调用函数,但由于一开始没有div。因此,当页面加载并单击删除按钮时,它会实现两次并破坏应用程序。
我是编程新手,我现在所做的主要是程序性的,所以任何输入工作都值得赞赏。我觉得我犯了一个菜鸟错误,伪代码在下面。
$(button).cick(function(){
store div in array;
add div to container;
call remove function;
});
function loadPage() {
retrieve stored array;
add stored divs to container;
call remove function;
}
loadPage();
您可以将删除操作委托给容器,如下所示:
$('#container').on('click', '.delete', function() {
$(this).closest('div.className').remove();
//here delete stored clone from array.
});
调整选择器以适合您的 HTML
这样,任何带有 class="delete"
的按钮在单击时,都将导致其包含div 的(内部)被删除(删除)。
- 该操作将应用于容器中的所有删除按钮,无论它们在附加此单击处理程序时是否就位,还是稍后插入。
- 如果(外部)容器本身未被删除(删除),则此委派操作将保持不变。
我认为如果您有单独的按钮来添加和删除会更容易。这样,您可以将一个按钮绑定到将div 添加到容器,另一个按钮用于删除上次推送的div。
这样的事情可能会有所帮助
var listOfAddedDivs = [];
$('.addDivButton').click(addNewDiv);
$('.removeDivButton').click(removeCurrentDiv);
function addNewDiv() {
listOfAddedDivs.push('<div> something </div>');
updateContainer(listOfAddedDivs);
}
function removeCurrentDiv() {
if(listOfAddedDivs.length >0) {
listOfAddedDivs.pop();
}
updateContainer(listOfAddedDivs);
}
function updateContainer(arrayContainingDivs) {
$('.container').html(arrayContainingDivs.join(' '));
}
相关文章:
- 使用一个Javascript函数提交多个表单可以在FF中工作,而不需要其他浏览器
- Jquery/javascript:加载页面时不需要的重复函数
- jQuery,函数中不需要重复执行函数,动态加载内容后
- 如何重新编码我的jQuery/JavaScript函数,使其更通用,不需要唯一标识符
- Javascript/JQuery 中的匿名函数的目的是什么,当我似乎不需要它时
- 函数不't在添加括号的情况下调用它时运行(即使它不需要参数)
- 当函数不需要 Javascript 时访问参数
- 为什么在成功函数的末尾不需要有“()”
- HTML图像“onclick”在调用javascript函数时重定向到另一个页面(不需要)
- 不需要的事件处理程序函数正在 jQuery 中执行
- 一个不需要输入错误消息的assert函数
- 函数.调用类似数组的对象,不需要第一个参数
- 空格键在运行javascript函数时导致不需要的文本
- 用jquery函数上传图像或文件,只需要它,不需要php,也不需要更多的代码
- 奇怪的字符编码问题导致js函数失败或添加不需要的字符
- 为什么我不需要在Sails.js控制器函数中调用next,即使它在其主体中有一个(异步的?)数据库查询
- 如何在.MVC 3 Razor中只触发一个JavaScript函数,而不需要控制器处理请求
- Jquery:将一个函数传递给另一个不需要的函数
- 为什么JavaScript不需要在函数声明后加分号?
- 在同一文件中使用ajax将javascript变量传递给php函数,而不需要刷新页面