这一直困扰着我,因为我不确定发生了什么,但感觉像是一个初学者问题。基本上我有一个按钮,如果点击则显示一个聊天框,另一个按钮只是作为页面另一部分的链接。
HTML code:
<a href="#what-you-get" class="btn btn-white btn-border radius-lger min-width"><strong>Learn More</strong></a>
<a href="#" data-role="toggle-chatbot" data-display="1" class="btn btn-white radius-lger min-width"><strong>Join Our Waitlist</strong></a>
JS代码:
$(function () {
// Shows or hides the chatbot
$('[data-role="toggle-chatbot"]').on('click', function(e) {
e.preventDefault();
if($(this).attr('data-display') == '1') {
$('.container-chat').removeClass('hide');
}
else {
$('.container-chat').addClass('hide');
}
});
});
有什么建议吗?提前谢谢!
编辑:谢谢this。问题是由于Ruby on Rails 5中的Turbolinks以及以下代码修复的东西(对.toggle-chatbot的更改是基于Rajesh的评论来优化事物):
$(document).on('turbolinks:load', function () {
// Shows or hides the chatbot
$('.toggle-chatbot').on('click', function(e) {
e.preventDefault();
if($(this).attr('data-display') == '1') {
$('.container-chat').removeClass('hide');
}
else {
$('.container-chat').addClass('hide');
}
});
});