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從ajax成功回調更新爲其他任何內容,例如「嗨,我是這個div中的新文本,應該修剪」,它不起作用。我希望它被應用於只有成功回調的新更新文本。
這是我到目前爲止已經試過:
success: function(data) {
$(".ellipsis").text(data);
$(".ellipsis", data).ellipsis(); // not working
}
這裏是沒有AJAX http://jsfiddle.net/TF6Rb/625/
任何想法的小提琴?
最近不知道我有什麼問題!我通過在成功回調的最後一行中將數據放在省略號函數旁邊來讀取它,它只會影響新添加的文本,而不是在具有相同.ellipsis類的其他任何文件上運行,這就是我想要的。 $( 「省略號」)省略號()。會再一次完成所有功能,而不僅僅是新添加的文本,對吧? – Maverick
是的。如果這是你製作插件的方式 – Neal