[英]Rails 5/jQuery: On click touchstart event not working
我正在嘗試使用波旁威士忌/替芯componenet(sliding_panel),並且有on('click touchstart')
事件。 我將此用於我的導航菜單。 該事件在首頁加載時將正常運行,但此后將停止。 該事件使用toggleClass
來顯示和隱藏菜單。 我不確定這是否是turbolinks問題,所以我做了一些挖掘,發現了jquery-turbolinks gem。 我經歷了安裝說明,但結果相同。 有沒有其他人有這個問題?
代碼如下:
_navbar.html.erb
<button type="button" class="js-menu-trigger sliding-panel-button">
Click for Sliding Panel
</button>
<nav class="js-menu sliding-panel-content">
<ul>
<li><%= link_to 'Users', users_path %></li>
<li><a href="javascript:void(0)">Item 2</a></li>
<li><a href="javascript:void(0)">Item 3</a></li>
</ul>
</nav>
<div class="js-menu-screen sliding-panel-fade-screen"></div>
slide_panel.js
$(document).ready(function(){
$('.sliding-panel-button,.sliding-panel-fade-screen,.sliding-panel-close').on('click touchstart',function (e) {
$('.sliding-panel-content,.sliding-panel-fade-screen').toggleClass('is-visible');
e.preventDefault();
});
});
slide_panel.scss
.sliding-panel-content {
$action-color: #477DCA !default;
$dark-gray: #333 !default;
$sliding-panel-border-color: $dark-gray;
$sliding-panel-background: lighten($sliding-panel-border-color, 5%);
$sliding-panel-color: #fff;
$sliding-panel-border: 1px solid $sliding-panel-border-color;
$sliding-panel-background-hover: $action-color;
$sliding-panel-color-hover: #fff;
$sliding-panel-background-focus: lighten($sliding-panel-background, 5%);
@include position(fixed, 0 auto 0 0);
@include size(220px, 100%);
background: $sliding-panel-background;
-webkit-overflow-scrolling: touch;
overflow-y: auto;
transform: translateX(-220px);
transition: all 0.25s linear;
z-index: 999999;
ul {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
li a {
border-bottom: $sliding-panel-border;
color: $sliding-panel-color;
display: block;
font-weight: bold;
padding: 1em;
text-decoration: none;
&:focus {
background-color: $sliding-panel-background-focus;
}
&:hover {
background-color: $sliding-panel-background-hover;
color: $sliding-panel-color-hover;
}
}
&.is-visible {
transform: translateX(0);
}
}
.sliding-panel-fade-screen {
@include position(fixed, 0);
background: black;
opacity: 0;
transition: all 0.2s ease-in-out;
visibility: hidden;
z-index: 999998;
&.is-visible {
opacity: 0.4;
visibility: visible;
}
}
.sliding-panel-button {
cursor: pointer;
display: inline-block;
outline: none;
padding: 10px 16px;
position: relative;
img {
height: 1.3em;
}
}
這些是從bourbon / refills網站精確復制的。
您不應該聽ready事件,而應該聽page:load
事件。 因此,代碼將如下所示:
$(document).on('page:load', function(){
$('.sliding-panel-button,.sliding-panel-fade-screen,.sliding-panel-close').on('click touchstart',function (e) {
$('.sliding-panel-content,.sliding-panel-fade-screen').toggleClass('is-visible');
e.preventDefault();
});
});
來源: Rails 4:如何在渦輪鏈接中使用$(document).ready()
希望能幫助到你。
好的,我有Turbolinks〜> 5.2。 我回到Turbolinks〜> 5.0.1再裝了jQuery像這樣: $(document).on('turbolinks:load', function()
,而不是使用ready()
這SO后幫我找出解決方案。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.