How to get the name of the user interface control that triggered the event?

Question

I have the following code that implements 2 jQuery sliders :

<script type="text/javascript"> $(document).ready(function () { $("#wheelLeft").slider({ value: 50, min: -100, max: 100, slide: handleSlide }); $("#wheelRight").slider({ value: -10, min: -100, max: 100, slide: handleSlide }); }); function handleSlide(event, ui) { $("#lblInfo").text(ui.id + ':' + ui.value); } </script> 

As you can see, both sliders generate a slide event, which is processed by the handleSlide function. Inside the handleSlide function handleSlide I can get the value of the slider by calling ui.value, but how do I know which slider actually created the event?

I tried ui.id, ui.name and some others that seemed logical, but they all returned as undefined. How to get the actual name of its CSS implementation (e.g. #wheelRight or #wheelLeft)?

Thanks.

Answer 1

Try to wrap ui.handle

 function handleSlide(event, ui) { $("#lblInfo").text( $(ui.handle).attr("id") + ':' + ui.value); } 

Change Unfortunately, this returns the element "a". This should return the parent id:

 $(ui.handle).parent().attr('id') 

Answer 2

You can pass id selectors (or any arguments of your choice) directly to your handler function:

 $(document).ready(function () { $("#wheelLeft").slider({ value: 50, min: -100, max: 100, slide: function(event, ui) { handleSlide(event, ui, "#wheelLeft"); } }); $("#wheelRight").slider({ value: -10, min: -100, max: 100, slide: function(event, ui) { handleSlide(event, ui, "#wheelRight"); } }); }); function handleSlide(event, ui, idSelector) { $("#lblInfo").text(idSelector); } 

Answer 3

 function handleSlide(event, ui) { var sender = event.srcElement || event.target; $("#lblInfo").text(ui.id + ':' + ui.value); } 

sender must contain the source element that raised the event.