jQueryの.liveのみ第二のクリックで動作します(、FNを「クリック」)
-
22-09-2019 - |
質問
私は$(generatedEl).live("click", fn...)
を使用する必要があるリスナークリックイベントをバインドするとき、私はそのためのJSで生成されたDOM要素を持っている、と(別の方法がありますか?)
ここで私が使用していたコードです
$(".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()
の中央にある)
しかし、関数は第二のクリックで実行されます。
缶誰かが、私はこの奇妙なバグを追跡する助けてください おかげ
EDIT:全体のコードブロックを追加しました。
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()
の素晴らしいところは、それが複数回呼び出される必要性をdoesntのことです。あなたがしなければならない.each()
のそれを取ることです。
あなたは、そのクラスを使用して作成することを任意の要素は、自動的にクリックイベントにバインドされます。
他のヒント
変数「isTruncedは」データから抽出する必要があると思われます。それは(ライブ関数内)initally定義されていないので、それはfalseにデフォルト設定されます。
あなたは各ループの外にライブ機能を引っ張ったらそう、これを試してみます:
$(".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");
}
});
OK、私は問題を得た。
だった場合バギーのロジックます。
これが修正されます:
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