2016-02-29 66 views
0

我寫了一個簡單的功能,它可以在PC上完美工作,但不能在手機上使用。每當我點擊.link p它不會觸發trigger('click')。也許問題在於其他地方,但我無法對其進行本地化。非常感謝幫助。.trigger('click');不在代碼中使用移動設備或語法?

HTML:

<div class="galeria"> 
<div class="gallery"> 
    <figure class="gallery-item"> 
     <div class="gallery-icon portrait"> 
      <a data-caption="" href=""> 
       <img/> 
      </a> 
     </div> 
     <figcaption class="wp-caption-text gallery-caption">Etykieta</figcaption> 
     <div class="overlay"></div> 
     <div class="link"> 
      <p>Whatever</p> 
     </div> 
    </figure> 
</div> 
</div> 

的jQuery:

var $container = jQuery('.galeria') 
jQuery('.galeria').isotope({ 
itemSelector: '.galeria .gallery', 
layoutMode: 'masonry', 
}); 

jQuery('.galeria .gallery-item').append('<div class="overlay"></div>'); 

jQuery('.galeria .gallery').each(function() { 
var text = jQuery(this).find('.gallery-item:first-child .gallery-caption').text(); 
jQuery(this).find('.gallery-item').append('<div class="link"><p>'+text+'</p></div>'); 
}); 

var marginTop = jQuery('.link').height(); 
jQuery('.link').css('margin-top',-marginTop/2) 


// here is the function I'm concerned about, but maybe the problem is somwhere else 
jQuery('.link p').on('click touchstart',function() { 
jQuery(this).closest('.gallery-item').find('a').trigger('click'); 
}); 

我想我給你們所有的信息需要,如果你需要更多的要求,而不是minusing我,請。問候。

---- ----編輯

Here是導致網站的代碼被放在鏈接。

---- EDIT 2 ----

好吧,我沒有描述什麼,我需要做的。通常鏈接a.gallery-icon打開一個燈箱畫廊,當你點擊它。但是我想創建另一個可點擊的元素,以使CSS樣式更復雜(動畫,疊加等),這就是爲什麼上面的函數附加了另一個div .link以及可點擊的p。點擊p提到a鏈接正在觸發。當我刪除所有功能創建額外的div和觸發鏈接點擊a直接在手機上正常工作。

回答

1

您的代碼不完整,所以在嘗試理解時可能會出錯,但我認爲您的問題在於您嘗試觸發<a>元素上的「單擊」事件以將用戶重定向到另一個頁面。

如果你的意思做,你應該使用下面的代碼(在您的「點擊touchstart」事件):

window.location.href = jQuery(this).closest('.gallery-item').find('a').attr('href'); 

- 編輯 -

當我檢查你的網站是可能的您的鏈接(。鏈接)元素在移動設備上不可見,因爲它僅在光標懸停時顯示.gallery-item

用於移動設備的最佳解決方案是將事件分配給元件則該用戶可以在瀏覽器中看到沒有任何徘徊(例如名爲.gallery項.overlay)。

- EDIT 2 -

正如我前面提到的,不應該將事件指派給元素,用戶可以在手機瀏覽器中看到沒有懸停在任何東西(如在手機瀏覽器是impssible)。

你可以這樣說:

jQuery('.gallery-item').on('click touchstart',function() { 
    jQuery(this).closest('.gallery-item').find('a').trigger('click'); 
}); 

如果代碼不會名爲.gallery項目工作,你必須使用由用戶指向元素可見,並在上面(其它選擇在頁面上的其他元素)。

+0

好吧,我會檢查一下,有另一個編輯描述我創建所有這些功能的真正含義。謝謝。 – Daniel

相關問題