正在選擇下面的jQuery UI滑塊DIV

Question

我可以點擊下面的任何元素（不在上面），它會根據鼠標的X軸進行更改。這似乎是jQuery UI的常態，至少可以說是很奇怪的。

http://jsfiddle.net/devcurry_com/JSmWM/

$('#musicVolume').slider({ 
      range: "min", 
      min: 0, 
      max: 100, 

      change: function (event, ui) { 
       alert('Stopped at ' + ui.value); 
      } 
    }); 

Answer 1

不能自行關閉div就像在HTML，所以解析器簡單地忽略<div />的/離開div打開狀態，直至強制關閉div的</body>之前（或者最接近的</div>或該div的最接近的正確關閉的父母）。

因此，<div />之後的所有內容都會被捕獲併成爲滑塊小部件的一部分，並在點擊時激活它，包括顯示選定值的p元素。

注意：您也無法自行關閉p元素 - 您可以執行的操作是隱藏HTML中可選的結束標記。儘管如此，這個特性對於你的用例來說並不是很理想。
其他說明：<p />是有效的標記爲/是語法糖和p元素不需要關閉標籤，但你如果phrasing content跟隨它希望它不會產生一個空p元素。如果您想要一個空的p，請正確關閉</p>。

正確關閉您的div s和p s將解決此問題。 Fiddle