CODEWITHSUNDEEP
javascriptjqueryhtmleventsselect
myhappycoding
myhappycoding

Reputation: 658

select is not firing any event from jQuery

I have looked for a lot and now I don't really know what to do. My problem is that I have a select control in a HTML5 document, like this:

<label for="efectosId" >Elija un efecto</label>
<select id="efectosId" >
  <option value="THRESHOLD" selected>Limite</option>
  <option value="GRAY">Escala de grises</option>
  <option value="OPAQUE">Opacidad</option>
  <option value="INVERT">Invertir</option>
  <option value="POSTERIZE">Posterizar</option>
  <option value="DILATE">Desenfoque Dilatar</option>
  <option value="BLUR">Desenfoque blur</option>
  <option value="ERODE">Desenfoque Erosionar</option>
</select>

Also, in a JavaScript file I have the following code:

$(document).ready(function(){
    $("#efectosId").on("change",function(){
        alert("hola mundo");
    });
});

When I try the code in a single document where I load jQuery library, it goes fine, but when I need to use it in a document where I load jQuery library, jQuery mobile library and jQuery ui library in that order, then it doesn't work:

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="./bgrins-spectrum-98454b5/spectrum.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"  integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="  crossorigin="anonymous"></script>

Please, could I have any support?? This is driving me mad Thanks!

Upvotes: 1

Views: 110

Answers (5)

myhappycoding
myhappycoding

Reputation: 658

Ok, The solution is that when I add a select using the libraries of jquery mobile ,jquery ui and bootstrap, the select control change the structure of my HTML:

<div class="ui-selectmenu-menu ui-front ui-selectmenu-open" style="top: 105px; left: 769.5px;"><ul aria-hidden="false" aria-labelledby="efectosId-button" id="efectosId-menu" role="listbox" tabindex="0" class="ui-menu ui-corner-bottom ui-widget ui-widget-content" aria-activedescendant="ui-id-7" aria-disabled="false" style="width: 196px;"><li class="ui-menu-item"><div id="ui-id-2" tabindex="-1" role="option" class="ui-menu-item-wrapper">Limite</div></li><li class="ui-menu-item"><div id="ui-id-3" tabindex="-1" role="option" class="ui-menu-item-wrapper">Escala de grises</div></li><li class="ui-menu-item"><div id="ui-id-4" tabindex="-1" role="option" class="ui-menu-item-wrapper">Opacidad</div></li><li class="ui-menu-item"><div id="ui-id-5" tabindex="-1" role="option" class="ui-menu-item-wrapper">Invertir</div></li><li class="ui-menu-item"><div id="ui-id-6" tabindex="-1" role="option" class="ui-menu-item-wrapper">Posterizar</div></li><li class="ui-menu-item"><div id="ui-id-7" tabindex="-1" role="option" class="ui-menu-item-wrapper ui-state-active">Desenfoque Dilatar</div></li><li class="ui-menu-item"><div id="ui-id-8" tabindex="-1" role="option" class="ui-menu-item-wrapper">Desenfoque blur</div></li><li class="ui-menu-item"><div id="ui-id-9" tabindex="-1" role="option" class="ui-menu-item-wrapper">Desenfoque Erosionar</div></li></ul></div>

so when I call it from jquery I have to call it like this:

$("#efectosId-menu").on("click",function(e){
    console.log(e.target.textContent);
});

Upvotes: 0

YouneL
YouneL

Reputation: 8369

It seems that you are loading bootstrap before jquery, use this order instead:

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"  integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="  crossorigin="anonymous"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="./bgrins-spectrum-98454b5/spectrum.js"></script>

From bootstrap doc:

Plugin dependencies

Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included before the plugin files). Consult our bower.json to see which versions of jQuery are supported.

Upvotes: 1

Anil
Anil

Reputation: 148

Try

<!DOCTYPE html>
            <html>
            <head>
                <title>dfgasdg</title>
                <script
              src="https://code.jquery.com/jquery-3.2.1.js"
              integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
              crossorigin="anonymous"></script>
            </head>
            <body>
              <label for="efectosId" >Elija un efecto</label>
                            <select id="efectosId" >
                                <option value="THRESHOLD" selected>Limite</option>
                                <option value="GRAY">Escala de grises</option>
                                <option value="OPAQUE">Opacidad</option>
                                <option value="INVERT">Invertir</option>
                                <option value="POSTERIZE">Posterizar</option>
                                <option value="DILATE">Desenfoque Dilatar</option>
                                <option value="BLUR">Desenfoque blur</option>
                                <option value="ERODE">Desenfoque Erosionar</option>
                            </select>
            <script type="text/javascript">
                $(document).ready(function(){
                $("#efectosId").on("change",function(){
                    alert("hola mundo");
                });
            });
            </script>
            </body>
            </html>

Upvotes: 0

lasha maraneli
lasha maraneli

Reputation: 87

Try to load jquery browser dependent, like if you don't need jquery mobile, just don't load it, I think they have conflicts

Upvotes: 0

Rajkumar Somasundaram
Rajkumar Somasundaram

Reputation: 1270

I reordered the script tags and removed integrity from jquery.min.js

$(document).ready(function(){
    $("#efectosId").on("change",function(){
        alert("hola mundo");
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="./bgrins-spectrum-98454b5/spectrum.js"></script>

<label for="efectosId" >Elija un efecto</label>
                <select id="efectosId" >
                    <option value="THRESHOLD" selected>Limite</option>
                    <option value="GRAY">Escala de grises</option>
                    <option value="OPAQUE">Opacidad</option>
                    <option value="INVERT">Invertir</option>
                    <option value="POSTERIZE">Posterizar</option>
                    <option value="DILATE">Desenfoque Dilatar</option>
                    <option value="BLUR">Desenfoque blur</option>
                    <option value="ERODE">Desenfoque Erosionar</option>
                </select>

Upvotes: 1

Related Questions