Question

我的代码中有一个滑块。当我点击它时，它应该在我的代码中调用一个函数myFunction（）来警告点击的消息。

这是我的代码无效。

<html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
 $(function () {
      $("#slider-1").slider({
           range: true,
           min: 0,
           max: 500,
           values: [0, 0],
           slide: function (event, ui) {
                $("#priceA").val("$" + ui.values[0] + " - $" + ui.values[1]);
           },
           stop: function () {
                getValues();
           }
      });
      $('.myClass').click(function(){
        myFunction();
      });
      function myFunction(){
        alert("Called");
      }
   });           
</script>
</head>
<p>
    <label for="priceA">Price rangeA:</label>
    <input type="text" id="priceA" style="border:0; color:#067ab4; font-weight:bold;">
</p>
<div id="slider-1" class="myClass"></div><br><br>
</html>

Answer 1

编辑：我删除了所有错误的答案。以下应该有效。

似乎jquery-ui正在捕获并吞咽click事件。这就是为什么你无法处理它，它不是冒泡！（据我所知）。你想要做的是绑定到滑块的start事件。这就像挂钩点击事件一样。

像这样：http://jsfiddle.net/U3qx5/12/

Answer 2

您是否有理由不能使用滑块已提供的事件？没有公开点击事件，但肯定会有更改或停止事件吗？

http://jsfiddle.net/pabo/d23X2/

$("#slider-1").slider({
    range: true,
    min: 0,
    max: 500,
    values: [0, 0],
    slide: function (event, ui) {
        $("#priceA").val("$" + ui.values[0] + " - $" + ui.values[1]);
    },
    stop: function (event, ui) {
    },
    change: function (event, ui) {
        myFunction();
    }
});

function myFunction() {
    alert("Called");
}

Answer 3

您必须在初始功能之外设置功能。它看起来像这样：

$(function () {

         $("#slider-1").slider({
             range: true,
             min: 0,
             max: 500,
             values: [0, 0],
             slide: function (event, ui) {
                 $("#priceA").val("$" + ui.values[0] + " - $" + ui.values[1]);
             },
             stop: function () {
                 getValues();
             }
         });


     });

$("#slider-1").click(function(){
alert('Called');
});

单击滑块时调用函数

3 个答案: