截断屏幕上的文本 resize/mobile 并能够扩展文本

Question

我有一个 fiddle 位于此处，https://jsfiddle.net/patricksharer/g43t1bnh/3/ 我一直在尝试使用 trunk8 jquery 插件在移动设备上查看时缩小页面上的一段文本。我的截断工作正常，但是当您单击 ..red more link 尝试扩展文本时，没有任何反应。有人可以看看我的代码看看我做错了什么吗？

我要截断的部分位于

<div class="grid-100 mobile-grid-100 main-photo-description">
     <p class="t8-toggle">Here's a couple of SHJ's cars at the Penske race shop in NC. This photo was taken while on tour with www.GaragePassShopTours.com</p>
</div>

一如既往地感谢你们美丽的 Whosebug 人！

Answer 1

问题在于使用 live，因为它是 deprecated as of 1.7。调整为 click 函数，例如：

$('#read-more').click(function (event) {
   $(this).parent().trunk8('revert').append(' <a id="read-less" href="#">read less</a>');
   return false;
});

或使用 on 如：

$('#read-more').on('click', function (event) {
   $(this).parent().trunk8('revert').append(' <a id="read-less" href="#">read less</a>');
   return false;
});

read-less更新：

$(document).on('click', '#read-less', function (event) {
     $(this).parent().trunk8(); 
     return false;
});

Answer 2

您使用的是新版本的 jquery，因此不支持 live 函数，请使用 on 代替

$('#read-more').on('click')

但要使 read-less 按钮起作用，您必须将其更改为

$(document).on('click',"#read-less")

这是事件作用于动态添加元素的常见模式。

这是一个有效的 Example。

Answer 3

我实际上是 trunk8 的创建者，所以我觉得有义务找出问题所在。

看起来您已经从 http://jrvis.com/trunk8/#toggle which was written for an older version of jQuery. The live method has been deprecated in favor of on. To confirm this, I kept your code exactly the same but changed the version of jQuery to something older than 1.9: https://jsfiddle.net/g43t1bnh/10/ 复制了示例并且它有效。

我还更新了我的网站以使用 on 而不是 live 以防止其他人遇到此问题。

这是一个使用与 jQuery 2.1.3 兼容的事件委托的重写版本：https://jsfiddle.net/g43t1bnh/8/

正如其他人所指出的，#read-less 在执行时不存在，因此您需要将单击事件处理程序绑定到其他某个祖先元素，以便委派工作。 document 用于此目的。在我上面链接的版本中，为了保持一致性，我在两个 more/less 绑定中都使用了委托，即使只有在少数情况下才有必要。

截断屏幕上的文本 resize/mobile 并能够扩展文本

Truncate text on screen resize/mobile with ability to expand text

html

javascript

jquery

plugins

truncate