Question

我有一个小提琴，https://jsfiddle.net/patricksharer/g43t1bnh/3/我一直试图使用trunk8 jquery插件在移动设备上查看我页面上的一段文字。我有截断工作正常，但当你点击..red more链接尝试扩展文本时，没有任何反应。有人可以看看我的代码，看看我做错了什么？

我试图截断的部分是，

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

一如既往地感谢Stackoverflow的美丽人才！

Answer 1

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

看起来你复制了http://jrvis.com/trunk8/#toggle中为旧版jQuery编写的示例。已弃用live方法，转而使用on。为了确认这一点，我保持你的代码完全相同，但是将jQuery的版本更改为早于1.9的版本：https://jsfiddle.net/g43t1bnh/10/并且它可以工作。

我还更新了我的网站，使用on代替live，以防止他人遇到此问题。

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

正如其他人所说，#read-less在执行时不存在，因此您需要将click事件处理程序绑定到其他祖先元素以使委托工作。 document用于此目的。在上面链接的我的版本中，我在更多/更少绑定中使用委托来保持一致性，即使它只在较少的情况下是必要的。

Answer 2

问题在于使用token，因为它是deprecated as of 1.7。调整为live功能，如：

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

Answer 3

您使用的是jquery的新版本，因此不支持live功能使用on

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

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

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

这是处理动态添加元素的事件的常见模式。

这是一个有效的Example。

在屏幕大小/移动设备上截断文字，可以展开文字

3 个答案: