title: JQuery Input Class event catching doesn't work in ASP.NET MVC 5
body: <p>First of all, I'm a Beginner in all the technologies I will talk about, but I need to setup a website to show my resaerch projects result, and I don't have the choice of the tech to use.</p>
  
  <p>I have some issue running some Javascript / JQuery code within a ASP.NET MVC 5 website.</p>
  
  <p>Here is what I want to integrate : </p>
  
  <p><a href="http://acanimal.github.io/thebookofopenlayers3/chapter02_03_layer_groups.html" rel="nofollow">http://acanimal.github.io/thebookofopenlayers3/chapter02_03_layer_groups.html</a></p>
  
  <p>This worked perfectly when I download the source, do some "Yeoman/Grunt/..." stuff, and open the html file.</p>
  
  <p>Then I tried to include that within my ASP.NET Website. (I did some BundleConfig, etc...)</p>
  
  <p>Almost every thing works fine, there is just the sliders event that does not work : I can slide then, but It seems the event is not "catched" and nothing happen.</p>
  
  <p>Contrarly, the check box work perfectly and make the layers appears and disapears.</p>
  
  <p>I was thinking that It my be because the slide is declared as an Input whit a class :</p>
  
  <pre><code>"&lt;input ... class='opacity' type='text' value='' data-slider-min='0' data-slider-max='1' data-slider-step='0.1' data-slider-tooltip='hide'&gt;";    
  </code></pre>
  
  <p>and here is the event cacthing code :</p>
  
  <pre><code> $('input.opacity').slider().on('slide', function(ev) {...do stuff...});    
  </code></pre>
  
  <p>But I don't know what to do to correct this, and to be able to catch the sliding event</p>
  
  <p>So if You have a solution, or if you think I don,t understand the problem, I'll be happy if you can tell me.</p>
  
  <p>EDIT: </p>
  
  <p>Here is the view (cshtml):</p>
  
  <p><a href="https://www.dropbox.com/s/r6nxjui2r96lgza/Index.cshtml?dl=0" rel="nofollow">https://www.dropbox.com/s/r6nxjui2r96lgza/Index.cshtml?dl=0</a></p>
  
  <p>EDIT2 : I just discover that it works in MVC with only one instance of the class.</p>
  
  <pre><code>&lt;input type="text" class="span2" value="" data-slider-min="-20" data-slider-max="20" data-slider-step="1" data-slider-value="-14" data-slider-orientation="horizontal" data-slider-selection="after" data-slider-tooltip="hide"&gt;   
  </code></pre>
  
  <p>followed by </p>
  
  <pre><code>&lt;input type="text" id="bar"&gt;     
  </code></pre>
  
  <p>and the JQuery:</p>
  
  <pre><code>                   $('input.span2').slider().on('slide', function (ev) {
                  $('#bar').val(ev.value);
              });    
  </code></pre>
  
  <p>but not with more. </p>
  
  <p>and it's work with many instance of the class in a simple html page. (I can ducplicate the input as I want, it cntinue to work)</p>