2011-11-04 13 views
1

したがって、ajax呼び出しが行われ、新しく更新されたテキストで関数が呼び出されるまで、すべてが完全に機能します。私はそれが.each()でなく.live()だからだと理解していますが、新しく更新されたajaxのテキストをどのように機能させるかはわかりません。.each()jQuery関数は新しいajaxデータでは機能しません

HTML & CSS:

.ellipsis { 
    white-space: nowrap; 
    overflow: hidden; 
} 

.ellipsis.multiline { 
    white-space: normal; 
} 

<div class="ellipsis" style="width: 100px; border: 1px solid black;">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div> 
<div class="ellipsis multiline" style="width: 100px; height: 40px; border: 1px solid black; margin-bottom: 100px">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div> 

<script type="text/javascript" src="/js/jquery.ellipsis.js"></script> 
<script type="text/javascript"> 
$(".ellipsis").ellipsis(); 
</script> 

jquery.ellipsis.js(関数は、この省略記号です):

(function($) { 
    $.fn.ellipsis = function() 
    { 
      return this.each(function() 
      { 
        var el = $(this); 

        if(el.css("overflow") == "hidden") 
        { 
          var text = el.html(); 
          var multiline = el.hasClass('multiline'); 
          var t = $(this.cloneNode(true)) 
            .hide() 
            .css('position', 'absolute') 
            .css('overflow', 'visible') 
            .width(multiline ? el.width() : 'auto') 
            .height(multiline ? 'auto' : el.height()) 
            ; 

          el.after(t); 

          function height() { return t.height() > el.height(); }; 
          function width() { return t.width() > el.width(); }; 

          var func = multiline ? height : width; 

          while (text.length > 0 && func()) 
          { 
            text = text.substr(0, text.length - 1); 
            t.html(text + "..."); 
          } 

          el.html(t.html()); 
          t.remove(); 
        } 
      }); 
    }; 
})(jQuery); 

これは、テキストと、しかし、テキストに正常に動作しますエリプシスdivは、「こんにちは、私はこのdivの新しいテキストです。トリムする必要があります」など、ajaxの成功のコールバックから更新されます。動作しません。成功コールバックの新しく更新されたテキストのみをに適用します。ここで

success: function(data) { 
    $(".ellipsis").text(data); 
    $(".ellipsis", data).ellipsis(); // not working 
    } 

はフィドルは、Ajaxなしhttp://jsfiddle.net/TF6Rb/625/

任意のアイデアです:?ここ

は、私がこれまで試したものですか

答えて

2

ただして$(".ellipsis").ellipsis();私は正常に動作するはずです。

+0

最近私に何が間違っているのかわかりません!私は、成功コールバックの最後の行のように省略記号の関数の隣にデータを置くことでそれを読んだだけで、同じ.ellipsisクラスを持つ他のものではなく、新しく追加されたテキストに影響します。 。 $( "。省略記号")。ellipsis();新しく追加されたテキストだけでなく、すべての機能を再度実行しますか? – Maverick

+0

はい。それがあなたがプラグインを作った方法であれば.. – Neal

関連する問題