jquery ui.slider: add click event to display/hide handle

Question

I am completely new to javascript and jquery. My programing knowledge is... nonexistent, I just started some days ago with some simple tasks like replacing a css class or toggling a div. So I want to apologize if I'm treading on someones toes by asking newbie-questions in here. But I hope that someone can help my and solve my problem.

I need to implement some sort of visual analog scale for a survey; ui.slider is perfect for that one. But I need the handle to be hidden by default. When the user clicks on the slider, the handle shall appear at the proper position. That should be fairly simple - at least I hope so - by just hiding the handle with css and changing it by a click event on the slider.

I use the following piece of code to wrap a normal div (a div is needed in my understanding to apply the jquery slider.js) to my input elements (they should be - at least visually - replaced by the slider) and pass the value of the slider to the input elements (needed for passing the values to a form). that works properly. (I do that instead of just putting a div in my DOM by default because I cannot influence some php scripts that will generate form elements of the survey and so on)

$(function() {
$.each($('.slider'),
function() {
 obj = $(this);
 obj.wrap('<div></div>');
 obj.parent().slider({
  change: function(event, ui) {
   $('input', this).val(ui.value);
  }
 });
});
});

Hiding the slider-handle can be done by CSS as described above by changing style properties of a.ui-slider-handle. but when I add a normal click event to the slider (.ui-slider) that changes css properties of the handle, nothing happens. As far as my basic knowledge goes it should have something to do with the click event not working on generated DOM elements. Am I right with that one? And if yes: how can I solve this problem? Could someone provide me a piece of code for my function and explain it so I might comprehend what's exactly going on?

I read a tutorial about events on learningjquery.com but I have not made enough progresses the last few days since I started working with JS/jquery to comprehend the steps and translate it into my example/problem. And I am running out of time (I need this for a survey I have to make asap, that's why I hope someone could give me a hint so I can solve this little issue somehow).

Thanks a lot, Marc.

Answer 1

Any reason you can't just include the show on the change event rather than a click? It's a bit cleaner code-wise rather than including a whole new event.

$(function() {
  $('.slider').wrap('<div></div>').parent().slider({
    change: function(event, ui) {
      $('input', this).val(ui.value);
      $('.ui-slider-handle').show();
    }
  });
});

Also, there was a bit of redundancy in the code - most jQuery functions return the object itself, so you can chain them. And you don't need that each function, since most jQuery functions also, when applied to a collection, run on all of them :)

Answer 2

thanks a lot for your help. you are right, I can just add it to the change event. Never thought of that!

consider this issue solved.

Marc.