我怎样才能让扩展函数使用动态jQuery数据？ [英] How can I get the expander function to work with dynamic jQuery data?

问题描述

感谢您看看这个问题。我试图让jQuery扩展函数在我的用户界面中工作。

问题是，它在数据在HTML中硬编码时起作用，但当它不起作用时数据是由jQuery动态放置的。

我创建了4张幻灯片以更好地说明问题（请参阅下面的图像）：

幻灯片1：包含我要展示的每个模块中显示的小文本的用户界面。
$ b 幻灯片2：为jQuery设置的div结构实时填充日期

幻灯片3：：Chrome Inspector显示动态数据在内存中（而不是HTML源代码）

幻灯片4：当我在HTML中对其进行硬编码时，

 < div class =tags-hidden>< p>一些数据...< / p>< / div> ; 
  

这里是扩展函数的原点：$ b​​ $ b

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>

解决方案

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/

这篇关于我怎样才能让扩展函数使用动态jQuery数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！