按钮点击后再次初始化初始化的jQuery函数

Question

试图再次初始化一个初始化函数来加载我的时间轴(jquery.timline)事件。不幸的是，它不起作用。任何想法如何解决以下问题?

<script>

var timelinefunction;

$(document).ready(function() {  

timelinefunction = function () {

var defaultOpts = { 

// "bar" or "point"
type            : "bar"

}   

$("#TestTimeline").Timeline(defaultOpts);

};      
timelinefunction(); // Execute function     

// $(document).on("click", "#modal-edit-top-submit-btn", function () { // DONT WORK
$("#modal-edit-top-submit-btn").click(function() {
// $('#TestTimeline').Timeline('destroy')
$('#TestTimeline').empty();
timelinefunction();
});

});
</script>

Answer 1

我认为这应该是你想要的(注意似乎在jsfiddle中工作得更好，似乎需要很长时间才能正确加载):https://jsfiddle.net/PatrickHume/ckp7vgos/1/

你不需要添加/隐藏或$("#myTimeline").Timeline('reload'…它们只是用来证明在删除并重新初始化时间轴后它仍然可以正常工作

let timelinefunction;
let timeline = null
let defaultOpts = {
// "bar" or "point"
type: "bar"
}
$(function() {
timeline = null;
timelinefunction = function() {
$("#myTimeline").Timeline(defaultOpts)
//For demo purposes to show timeline events still work
$("#myTimeline")
.Timeline('reload', defaultOpts, (elm, opts, usrdata) => {
console.log(usrdata.msg)
}, {
msg: 'For demo purposes to show timeline events still work'
})
};
timelinefunction(); // Execute function     
timeline = $("#container").html()
$("#remove").click(function() {
$('#myTimeline').Timeline('destroy')
$('#container').empty()
});
$("#add").click(function() {
$("#container").html(timeline)
timelinefunction()
})
$("#hide").click(function() {
//For demo purposes to show timeline events still work
$('#myTimeline').Timeline('hide')
console.log('For demo purposes to show timeline events still work')
});
$("#show").click(function() {
//For demo purposes to show timeline events still work
$('#myTimeline').Timeline('show')
console.log('For demo purposes to show timeline events still work')
});
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/gh/ka215/jquery.timeline@main/dist/jquery.timeline.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/ka215/jquery.timeline@main/dist/jquery.timeline.min.js"></script>
<div id="container">
<div id="myTimeline">
<ul class="timeline-events">
<li data-timeline-node="{ start:'2019-02-26 10:00',end:'2019-02-26 13:00',content:'<p>Event Body...</p>' }">Event Label</li>
<li data-timeline-node="{ start:'2019-03-01 23:10',end:'2019-03-02 1:30' }">
<span class="event-label">Event Label</span>
<span class="event-content">
<p>Event Body...</p>
</span>
</li>
</ul>
</div>
<!-- Timeline Event Detail View Area (optional) -->
<div class="timeline-event-view"></div>
</div>
<button id="remove">
Remove
</button>
<button id="add">
Re Add
</button>
<button id="hide">
hide Add
</button>
<button id="show">
show Add
</button>

我希望这对你有帮助