防止mouseup事件多次触发

Question

I have read several previous questions about similar issues and already think I've gathered that it's a problem with propagation through multiple DOM items, however I'm still finding that my Ajax gets fired multiple times when the mouseup even triggers after releasing my jquery slider.

The code I've experimented with is below. Can anyone see anything glaringly obvious and explain why the propagation statement I included isn't working? I've tried the e.stopPropagation(); line in multiple places.

        $('#slider-range').mousedown(function(e) {

                $('#slider-range').one('mouseup', function() {
                        e.stopPropagation();        
                    $("#"+pupil).css("visibility","hidden");
                    $( "img[name='save"+pupil+"']" ).show();


                                $.ajax(
                                {
                                    type: "POST", 
                                    url: "readingAgeAjax.php",
                                    data: (
                                    {
                                        "type": "saveReadingAge",
                                        "readingAge": $('#hiddenSpan'+pupil).html(),
                                        "pupilID": pupil
                                    }), 

                                    success: function(response)
                                    {   
                                        $( "img[name='save"+pupil+"']" ).hide();                
                                    }
                                });




                        });
                     return false;
                });

Answer 1

It's not clear how you want to use your slider. You basically indicated you wanted to do this:

 $(function() { $('#slider-range').mousedown(function(e) { var myEvent = e; console.log("mousedown", myEvent); $('#slider-range').one('mouseup', function(e) { myEvent.stopPropagation(); console.log("mouseup", e); }); return false; }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="slidecontainer"> <input type="range" min="1" max="100" value="50" class="slider" id="slider-range"> </div> 

This would suggest you want to stop the mousedown event during the mouseup event. Not sure how this would help.

Since you need to send and receive data via AJAX, I would wait until the user has completed the slide event and then send the value via AJAX. So either looks for slide-stop, change, or mouseup and then send the data.

 $(function() { $('#slider-range').on("mousedown mouseup", function(e) { console.log(e); if (e.type == "mouseup") { console.log($(this).val()); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="slidecontainer"> <input type="range" min="1" max="100" value="50" class="slider" id="slider-range"> </div> 

Answer 2

I think you have missed adding the e in function parameter

$('#slider-range').one('mouseup', function(e) {

Also check your console for errors