Pregunta

Tengo un elemento DOM que se genera con JS, y por lo tanto cuando quiero enlazar un evento de clic oyente necesito usar $(generatedEl).live("click", fn...) (hay una manera diferente?)

aquí está el código que estoy utilizando:

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

(esto está en medio de una .each())

Sin embargo, la función sólo se ejecuta en el segundo clic.

Puede alguien por favor me ayude a localizar a este extraño error, Gracias

EDIT:. Se ha añadido la totalidad de bloque de código

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

                    }
             });                                                        

        }
¿Fue útil?

Solución

Lo bueno de .live() es que doesnt necesidad de ser llamado más de una vez. Todo lo que tiene que hacer es llevarlo a cabo de la .each().

Desde que está utilizando una clase como un selector de cualquier elemento que va a crear con esa clase automáticamente se une al evento click.

Otros consejos

Parece que la variable "isTrunced" necesita ser extraído de los datos. Dado que no se define digan (dentro de la función en vivo) por defecto lo falso.

Así que una vez que tire la función en vivo fuera de la cada bucle, intente lo siguiente:

$(".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, tengo el problema

la lógica de la silla de paseo si era.

Esta es la corregida:

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
  }       

De todos modos, gracias a Ariel , buen punto.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top