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/
任意のアイデアです:?ここ
は、私がこれまで試したものですか
最近私に何が間違っているのかわかりません!私は、成功コールバックの最後の行のように省略記号の関数の隣にデータを置くことでそれを読んだだけで、同じ.ellipsisクラスを持つ他のものではなく、新しく追加されたテキストに影響します。 。 $( "。省略記号")。ellipsis();新しく追加されたテキストだけでなく、すべての機能を再度実行しますか? – Maverick
はい。それがあなたがプラグインを作った方法であれば.. – Neal