jQuery的.live(“点击”,FN)只适用于第二次点击
-
22-09-2019 - |
题
我有与JS生成DOM元素,因此,当我想收听我需要使用$(generatedEl).live("click", fn...)
绑定一个点击事件(是否有不同的方式?)
这里是我使用的代码:
$(".toggleView").live("click", function(){
if(isTrunced){
$(this).html(cntarctText).siblings("h3").html(currEl.data("md").myFullText)
isTrunced = false
}
else{
$(this).html(expandText).siblings("h3").html(currEl.data("md").truncedText)
isTrunced = true
}
});
(这是在中间.each()
的)
但功能只能运行在第二次点击。
有人可以帮我追查这个奇怪的错误, 感谢
编辑:增加整个代码块
var truncMe = function(passedNode, passedChanges){
var truncTarget = passedNode,
expandText = "more",
cntarctText = "less",
isTooLong = false,
isTrunced = false,
maxChar = 170,
toggleView
truncTarget.each(function (index, domEle) {
var currEl = $(domEle)
currEl.data("md", {myFullText:currEl.html(),isTooLong:false, isTrunced:false })
if(currEl.data("md").myFullText.length >= maxChar){
currEl.data("md").truncedText = currEl.data("md").myFullText.substring(0, maxChar);
currEl.data("md").isTooLong = true;
currEl.siblings(".toggleView").remove()
if(passedChanges){
currEl.data("md").myFullText = passedChanges;
currEl.data("md").truncedText = currEl.data("md").myFullText.substring(0, maxChar);
}
/* here the element is created */
toggleView = $("<div class='toggleView'/>").html(expandText).appendTo(currEl.parent());
currEl.html(currEl.data("md").truncedText)
/* here the event is binded */
$(".toggleView").live("click", function(){
if(isTrunced){
$(this).html(cntarctText).siblings("h3").html(currEl.data("md").myFullText)
isTrunced = false
}
else{
$(this).html(expandText).siblings("h3").html(currEl.data("md").truncedText)
isTrunced = true
}
});
}
else{
currEl.siblings(".toggleView").remove()
}
});
}
解决方案
有关.live()
伟大的事情是,它并不需要被调用一次以上。所有你需要做的就是把它拿出来.each()
的。
由于正在使用的一类作为选择将要使用这个类创建的任何元素将被自动绑定到点击事件。
其他提示
看来,变量“isTrunced”需要从所述数据提取。因为它不initally定义(实时函数内)将默认为假。
所以,一旦你拉活的功能出了每个循环的,试试这个:
$(".toggleView").live("click", function(){
if($(this).data("isTrunced")){
$(this).html(cntarctText).siblings("h3").html(currEl.data("md").myFullText)
$(this).data("isTrunced", "false");
} else {
$(this).html(expandText).siblings("h3").html(currEl.data("md").truncedText)
$(this).data("isTrunced", "true");
}
});
行,我得到了问题
的如果是越野车的逻辑。
这是校正:
if(isTrunced){
$(this).html(cntarctText).siblings("h3").html(currEl.data("md").myFullText)
isTrunced = false
}
else{
$(this).html(expandText).siblings("h3").html(currEl.data("md").truncedText)
isTrunced = true
}
反正由于沙龙时,良好的点。
不隶属于 StackOverflow