正在选择下面的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