Question

我正在使用JQuery和一个名为collapser的库。它工作正常。

我现在需要更新页面并且不能使它更加动态 - 我希望根据下拉列表的选择显示某些内容。但是，我无法让collapser jQuery工作，崩溃能力不起作用（链接没有显示）

<!-- please make a selection from the drop down list -->

<select id="ddl" >
    <option>1</option>
    <option>2</option>
</select>
<div class='collapse'>1<br />2<br />3<br />4<br />5<br /></div><!--you can see this (kind of) works. The word hide exists and when clicked, it 'hides' (it's faulty but the word 'hides' is still shown)-->

<hr />

<div id="results"></div>

和JavaScript

 $('#ddl').change(function() {
 document.getElementById("results").innerHTML = "<div class='collapseJs'>11<br />12<br />13<br />14<br />15<br /></div>";
});

$(document).ready(function(){$('.collapse').collapser({
mode: 'lines',
truncate: 3,
ellipsis: '...',
hideText: 'Hide',
showText: 'Show all',
atStart: 'show'
});
});

$(document).ready(function(){$('.collapseJs').collapser({
mode: 'lines',
truncate: 3,
ellipsis: '...',
hideText: 'Hide',
showText: 'Show all',
atStart: 'show'
});
});

JSFiddle：http://jsfiddle.net/6t7jy/6/

我正在努力实现的目标是什么？当用户更改选择时，将显示新文本，但是collapser jquery仍在运行。

Answer 1

在解雇change()

时尝试输入脚本

$('#ddl').change(function () {
    document.getElementById("results").innerHTML = "<div class='collapseJs'>1<br />2<br />3<br />4<br />5<br /></div>";
    $('.collapseJs').collapser({ //Added event of collapser
        mode: 'lines',
        truncate: 3,
        ellipsis: '...',
        hideText: 'Hide',
        showText: 'Show all',
        atStart: 'show'
    });
});

Demo

如何从另一个函数的结果调用Jquery

1 个答案: