动态添加的链接(类名.divToggle
和.removeDiv
)只有在第一次单击两次时才起作用。是什么阻止了它们立即正常工作?
$(document).ready(function(){
// adds click event to links.
$('a.divToggle').live('click', function(event) {
// Toggles the visibility of divs.
event.preventDefault;
$(this).toggle(function(){
$(this).next(".divToToggle").slideUp("slow");
$(this).text("show[+]");
},
function(){
$(this).next(".divToToggle").slideDown("slow");
$(this).text("hide[-]");
});
});
// used to remove divs from the page.
$("a.removeDiv").live("click", function(event) {
event.preventDefault;
$(this).parent().prev("a").prev("h2").remove();
$(this).parent().prev("a").remove();
$(this).parent().next("br").remove();
$(this).parent().remove();
});
// Used to add new divs to the page.
$(".addDiv").click(function(){
$("<h2>Title Area</h2><a href='#' class='divToggle'>hide[-]</a>"
+ "<div class='divToToggle'><a href='#' class='removeDiv'>Remove this div</a>"
+ "<ul><li>List element 1</li><li>List element 2</li>"
+ "<li>List element 3</li></ul></div><br />").insertBefore($(this));
});
});
3条答案
按热度按时间gz5pxeao1#
$(...).toggle
并没有立即执行任何操作,它只是将click事件绑定到选定的元素,以便将来单击时会调用这两个函数中的一个。因此,第一次单击只会设置toggle事件处理程序,第二次单击实际上会调用toggle事件处理程序。(并且还添加了 * 另一个 * 切换事件处理程序!所以第三次单击调用 * 两个 * 切换事件处理程序,以此类推。).toggle
是.click
绑定的替代方法,而不是(通常)在.click
事件处理程序中使用的方法。toggle
没有“live”版本,但您可以自己编写一个,例如:uajslkp62#
这是一个很长的机会,但这是因为你有事件。在所有其他代码之前?我通常使用它作为函数的最后一条语句。
就像我说的,这是一个长期的机会,但值得一试!
您是否尝试过显示javascript警报或使用Firebugs日志窗口来查看事件是否是第一次触发?也许它是触发了,但没有按照您的预期进行,或者是其他原因导致它失败?
olhwl3o23#
所以这就是我最后的结果看起来还可以。
});