0

ドロップダウン メニュー項目で jQuery スライダーを使用しています。メニュー項目をクリックすると、スライダー付きのドロップダウンが開きます。ユーザーは、スライダー ハンドルの 1 つをドラッグする必要があります。その時点以降、そのページでマウスを動かすと、スライダー イベントとコールバックが発生します。これは、ページの別の場所をクリックするまで続き、メニューの dowpdown を効果的にロールバックします。

この動作は正常ですか？ユーザーがスライダー ハンドルを離した後、スライダー変更イベントを停止するにはどうすればよいですか? ユーザーがスライダーを変更するたびにデータベースからリロードするページがあります。これにより、データベースに過度の負荷がかかっています。

ブートストラップで jQuery UI を使用しています。http://jsfiddle.net/Sh5A5/2/で例を見ることができます

JS は次のとおりです。

islide = 0;
$("#XYZ").text("DDDDDxD");
$("#XYZ").append("<b class=caret></b>");
$("#slider-range").slider({
    range: true,
    min: 0,
    max: 500,
    values: [75, 300],
    slide: function (event, ui) {
        alert("hello #" + ++islide);
        $("#XYZ").html("$" + $("#slider-range").slider("values", 0) + " - $" + $("#slider-range").slider("values", 1) + " <b class='caret'></b>");


    }
});

およびhtml：

<div class="nav dropdown"> <a id="XYZ" data-toggle="dropdown" class="btn btn-primary" href="#"></a>
    <ul class="dropdown-menu">
        <li><a href="#">
                <p>Range: 0 to Inf</p>
                   <div id="slider-range"></div>
                </a>
        </li>
    </ul>
</div>

ブートストラップなしで同じことを試しました。見た目は悪いですが、同じように動作します。より良い代替手段はありますか？

ありがとう

4

1 に答える 1

1

この動作の原因は次の行です。

alert("hello #" + ++islide);

スライド イベント ハンドラ内で alert() が呼び出されると、マウスは決して離されません。したがって、 alert() への呼び出しを削除する必要があります: http://jsfiddle.net/Rusln/eKjCD/

于 2013-06-21T13:18:57.830 に答える