Why is the jquery script not working

Question

Why is the jQuery script working in my jsfiddle but not in my page  What I ve done  Tried different versions of JQuery   made the script So I have this test page  Head Part     lt  -- Scripts -- gt           lt script src  quot   ajax googleapis com ajax libs jquery 1 10 1 jquery min js quot  gt  lt  script gt           lt script src  quot   ajax googleapis com ajax libs jqueryui 1 10 3 jquery-ui min js quot  gt  lt  script gt              lt style gt               select  canselect code                   width 200px                  height 200px                             fr                   float right                             fl                   float left                           lt  style gt            lt script gt    document  ready function                    id    quot btnRight  quot     click function  e               this  prev  select   find  option selected   remove   appendTo   isselect code                  id    quot btnLeft  quot     click function  e           this  next  select   find  option selected   remove   appendTo   canselect code                       lt  script gt            lt  head gt   Body Part   lt div gt       lt select id  canselect code  name  canselect code  multiple class  fl  gt           lt option value  1  gt toto lt  option gt           lt option value  2  gt titi lt  option gt       lt  select gt       lt input type  button  id  btnRight code  value     gt       gt       lt br gt       lt input type  button  id  btnLeft code  value     lt       gt       lt select id  isselect code  name  isselect code  multiple class  fr  gt           lt option value  3  gt tata lt  option gt           lt option value  4  gt tutu lt  option gt       lt  select gt   lt  div gt   JSFIDDLE HERE Now my question is  Why is the code working in JsFiddle but not in my document  Thanks for your answers  EDIT  Added document ready function  still does not work

User · Answer

This may not be the answer you are looking for, but may help others whose jquery is not working properly, or working sometimes and not at other times.

This could be because your jquery has not yet loaded and you have started to interact with the page. Either put jquery on top in head (probably not a very great idea) or use a loader or spinner to stop the user from interacting with the page until the entire jquery has loaded.

User · Answer

This works fine  just insert your jquery code in document ready function      document  ready function e              your code here       example    jquery        document  ready function e                  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                         html       lt div gt           lt select id  canselect code  name  canselect code  multiple class  fl  gt               lt option value  1  gt toto lt  option gt               lt option value  2  gt titi lt  option gt           lt  select gt           lt input type  button  id  btnRight code  value     gt       gt           lt br gt           lt input type  button  id  btnLeft code  value     lt       gt           lt select id  isselect code  name  isselect code  multiple class  fr  gt               lt option value  3  gt tata lt  option gt               lt option value  4  gt tutu lt  option gt           lt  select gt       lt  div gt

User · Answer

if you have some other scripts that conflicts with jQuery wrap your code with this   function            here is your code    jQuery

User · Answer

Wrap your script in the ready function  jsFiddle does that automatically for you     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                  This is why you should not use third party tools unless you know what they automate simplify for you

User · Answer

Samuel Liew is right  sometimes jquery conflict with the other jqueries  to solve this problem you need to put them in such a order that they may not conflict with each other  do one thing  open your application in google chrome and inspect bottom right corner with red marked errors  which kind of error that is

User · Answer

This worked for me    lt script gt       jQuery noConflict            Use jQuery via jQuery   instead of via          jQuery document  ready function           jQuery  div   hide                lt  script gt    Reason   Many JavaScript libraries use   as a function or variable name  just as jQuery does  In jQuery s case    is just an alias for jQuery  so all functionality is available without using        Read full reason here  https   api jquery com jquery noconflict   If this solves your issue  it s likely another library is also using

User · Answer

Use noConflict   method  ex jQuery noConflict    and Use jQuery via jQuery   instead of via      Ex jQuery   id   val    instead of     id   val

User · Answer

lt script type  text javascript   gt      do your codes here  it will work       type  text javascript  is important for jquery   lt script gt

[javascript] Why is the jquery script not working?

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to css