jQuery .live ( „Klick“, fn) funktioniert nur auf den zweiten Klick

Question

Ich habe ein DOM-Element, das mit js erzeugt wird, und daher, wenn ich will ein Click-Ereignis binden Zuhörer i zu verwenden $(generatedEl).live("click", fn...) muß (ist es eine andere Art und Weise?)

Hier ist der Code, ich verwende:

$(".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
                        }       
                     });

(dies ist in der Mitte eines .each())

Aber die Funktion läuft nur auf dem zweiten Klick.

kann mir bitte jemand diese seltsame Fehler aufzuspüren helfen, Dank

EDIT:. Hinzugefügt wird der gesamte Codeblock

    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()

                    }
             });                                                        

        }

Answer 1

Die große Sache über .live() ist, dass es braucht doesnt mehr genannt werden als einmal. Alles, was Sie tun müssen, ist es der .each() herausnehmen.

Da Sie eine Klasse als Selektor jedes Element verwenden, dass Sie mit dieser Klasse erzeugt werden automatisch auf das Click-Ereignis gebunden.

Answer 2

Es scheint, dass die Variable „isTrunced“ muss aus den Daten extrahiert werden. Da es nicht initally definiert ist (in Live-Funktion), um es falsch nicht erfüllt.

Also, wenn Sie die Live-Funktion aus der jeder Schleife ziehen, versuchen Sie dies:

$(".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");
 }
});

Answer 3

OK, ich habe das Problem

die Logik des ob war fehlerhaft.

Dies ist die korrigierte:

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
  }       

Wie dem auch sei dank Ariel , guter Punkt.