StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POWhy is the jquery script not working?
text
Body
copied!<p>Why is the jQuery script working in my jsfiddle but not in my page? </p> <p>What I've done: Tried different versions of JQuery...made the script</p> <p>So I have this test page:</p> <h2>Head Part</h2> <pre><code>  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> <style> select #canselect_code { width:200px; height:200px; } .fr { float:right; } .fl { float:left; } </style> <script> $(document).ready(function(){ $('[id^=\"btnRight\"]').click(function (e) { $(this).prev('select').find('option:selected').remove().appendTo('#isselect_code'); }); $('[id^=\"btnLeft\"]').click(function (e) { $(this).next('select').find('option:selected').remove().appendTo('#canselect_code'); }); }); </script> </head> </code></pre> <h2>Body Part</h2> <pre><code> <div> <select id='canselect_code' name='canselect_code' multiple class='fl'> <option value='1'>toto</option> <option value='2'>titi</option> </select> <input type='button' id='btnRight_code' value=' > ' /> <br> <input type='button' id='btnLeft_code' value=' < ' /> <select id='isselect_code' name='isselect_code' multiple class='fr'> <option value='3'>tata</option> <option value='4'>tutu</option> </select> </div> </code></pre> <p><a href="http://jsfiddle.net/7785m/" rel="noreferrer">JSFIDDLE HERE</a></p> <p>Now my question is: Why is the code working in JsFiddle but not in my document?</p> <p>Thanks for your answers!</p> <p>EDIT: Added document ready function..still does not work!</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload