如果用户单击另一个链接,则Jquery单击事件不会注册

时间:2016-11-12 13:40:25

标签: javascript jquery

这一直困扰着我,因为我不确定发生了什么,但感觉像是一个初学者问题。基本上我有一个按钮,如果点击则显示一个聊天框,另一个按钮只是作为页面另一部分的链接。

  • 如果我先点击聊天按钮,我的Jquery代码会被调用并且显示正确
  • 如果我先点击锚链接按钮,我确实会去右边的部分;但之后单击聊天按钮不再调用Jquery代码(单击事件未注册)

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');
    }
  });

});

0 个答案:

没有答案