2011-08-02 98 views
13

什麼是可靠的方式來檢測jQuery Mobile中的選擇滑塊的更改?我嘗試綁定一個處理程序來更改選擇控件本身的事件,但它在初始頁面顯示時觸發,然後在點擊時觸發多次,有時甚至在懸停時(在桌面瀏覽器中)觸發。檢測jQuery Mobile中的選擇滑塊更改事件

這種行爲的最小工作例子是張貼在這裏:http://jsfiddle.net/NPC42/mTjtt/3/

這可能是由於jQuery Mobile的增加引起的多種元素的樣式選擇爲倒裝切換,但我無法找到的推薦方式做到這一點。

任何幫助,非常感謝。

+0

+1爲好問題。看起來像事件冒泡 –

回答

8

未必是最靈巧的解決方案,但它的工作原理 http://jsfiddle.net/mTjtt/4/

+0

感謝您的想法,但對我來說,它仍然會導致每兩個州狀態變化2-3警報:(它檢查鉻,也許這不是一個好主意,應該在實際的移動測試?雖然這將是一場噩夢。 – NPC

+0

奇怪的是,我無法讓它重現那個問題(在Chrome中),但那只是在jsfiddle中。 – Calum

+0

所以你根本沒有看到問題?嗯... – NPC

2

活生生的例子:

JS:

$('#my-slider').change(function(event) { 
    event.stopPropagation(); 
    var myswitch = $(this); 
    var show  = myswitch[0].selectedIndex == 1 ? true:false; 

    if(show) {    
     $('#show-me').fadeIn('slow'); 
     $('#first-me').fadeOut(); 
    } else {    
     $('#first-me').fadeIn('slow'); 
     $('#show-me').fadeOut(); 
    } 
}); 

HTML:

<div data-role="page" id="home" class="type-home"> 
    <div data-role="content"> 
     <div class="content-primary"> 
      <p>The flip toggle switch is displayed like this:</p> 
      <div data-role="fieldcontain"> 
       <label for="slider">Flip switch:</label> 
       <select name="slider" id="my-slider" data-role="slider"> 
        <option value="off">Off</option> 
        <option value="on">On</option> 
       </select> 
      </div> 
      <div id="first-me"> 
       <p> 

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
       </p> 
      </div> 
      <div id="show-me" class="hidden"> 
       <p> 
        Bacon ipsum dolor sit amet bresaola velit laboris bacon eiusmod. Id ex short ribs, dolor dolore rump pork belly beef ad ullamco salami labore aute ut. Jowl et in do, fatback jerky salami reprehenderit irure laboris pork loin commodo qui eu. Chuck tri-tip cupidatat, turkey sunt in anim jerky pork belly exercitation bacon. Eu corned beef qui adipisicing, ground round veniam turkey chicken incididunt deserunt. Proident t-bone chuck, non excepteur biltong elit in anim minim swine short loin magna do. Sint enim nisi, minim nulla tongue ut incididunt ground round. 
       </p> 
      </div> 
     </div> 
    </div> 
</div> 

UPDATE:

我曾提出與JQM這裏的問題/錯誤:

+0

您是否檢查過代碼的執行次數?對於我來說,這被稱爲2-3次。我猜你確實緩慢地阻止了人們看到這一點。更改爲您的實時代碼以查看此效果:http://jsfiddle.net/NPC42/KCQ4Z/59/ – NPC

+0

起初我沒有看到它,但它是jQuery版本1.6.2導致這一點。 1.6.1在我的測試中很好。也許你應該使用點擊事件而不是改變事件 –

+0

嗯點擊事件似乎並沒有觸發。測試 –

1

使用此代碼,

$(".mySliders").slider({ 
    create: function (event, ui) { 
     $(this).bind('change', function() { 
      ... 
      ... 
     }); 
    } 
}); 

!請勿將type =「range」放入輸入標記,而應將type =「text」。

由於您正在手動調用滑塊功能。

+0

它與.change綁定沒有任何區別,在原始的小提琴上嘗試過它:http://jsfiddle.net/mTjtt/127/你真的測試過它嗎? – NPC