如何让扩展器函数能够处理动态 jQuery 数据？
感谢您查看这个问题。我正在尝试让 jQuery 扩展器功能在我的 UI 中工作。
问题是，当数据硬编码在 HTML 中时它可以工作，但当数据由 jQuery 动态放置时它不起作用。
我创建了 4 张幻灯片来更好地说明问题（请参阅下面的图像）：
幻灯片 1： 包含我试图在显示的每个模块中展开的小文本的 UI。
幻灯片 2： 为 jQuery 设置的 div 结构，用于实时填充日期
幻灯片 3： Chrome 检查器显示动态保存在内存中的数据（而不是在 HTML 源代码中）
>幻灯片 4： 当我在 HTML 中对其进行硬编码时，扩展器函数起作用：
<div class="tags-hidden"><p>some data...</p></div>
以下是扩展器函数的起源： http://plugins.learningjquery.com/expander/
非常非常感谢您的帮助或建议你可以提供。以下是幻灯片：
编辑 1 - 这是根据您使用 .live() 的建议的新代码...似乎没有单击即可调用：
<script type="text/javascript">
$(document).ready(function() {
$('.div.tags-hidden p').live('click', function() {
$('div.tags-hidden p').expander({
slicePoint: 80, // default is 100
expandText: '[...]', // default is 'read more...'
collapseTimer: 5000, // re-collapses after 5 seconds; default is 0, so no re-collapsing
userCollapseText: '[^]' // default is '[collapse expanded text]'
});
});
</script>
Thanks for taking a look at this question. I am trying to get the jQuery expander function to work in my UI.
The problem is, it works when the data is hardcoded in the HTML but it does not work when data is dynamically placed by jQuery.
I have created 4 slides to better illustrate the issue (see below for images):
SLIDE 1: The UI that contains the small text I am trying to expand in each module shown.
SLIDE 2: The div structure set up for jQuery to populate date in realtime
SLIDE 3: Chrome Inspector showing the data dynamically held in memory (not in the HTML source)
SLIDE 4: The expander function works when I hardcode this in the HTML:
<div class="tags-hidden"><p>some data...</p></div>
Here is the origin of the expander function:
http://plugins.learningjquery.com/expander/
Many, many thanks for any help or advice you could offer. Here are the slides:
EDIT 1 - Here is the new code based on your suggestion to use .live()... It doesn't seem to get called on click:
<script type="text/javascript">
$(document).ready(function() {
$('.div.tags-hidden p').live('click', function() {
$('div.tags-hidden p').expander({
slicePoint: 80, // default is 100
expandText: '[...]', // default is 'read more...'
collapseTimer: 5000, // re-collapses after 5 seconds; default is 0, so no re-collapsing
userCollapseText: '[^]' // default is '[collapse expanded text]'
});
});
</script>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我认为您很想将 .live() 用于渲染页面时不显示的元素。
看看这里 http://api.jquery.com/live/
I think you jeed to use .live() for elements that are not displayed when the page is rendered.
Take a look here http://api.jquery.com/live/
加载内容后，您可能需要重新连接扩展器插件。例如，如果您通过 ajax 调用动态加载内容，则需要在 ajax 加载完成后再次调用
$('div.tags-hidden p').expander()。You will probably have to re-wire the expander plugin after your content is loaded. If you are loading your content dynamically via ajax calls, for example, you will need to call
$('div.tags-hidden p').expander()again after the ajax load is complete.