CODEWITHSUNDEEP
javascriptjqueryhtmlhandlebars.js
Elfayer
Elfayer

Reputation: 4561

Can't make the event "onchange" on <select> work in javascript

I've tried a lot of ways to make it work, never succeed.

Here is the code :

JS :

console.debug("before");
$("#link-ranges").onchange = function() {
    console.debug("test");
};

before is displayed once, test is never while i'm clicking on the options.

HTML :

<label for="link-ranges">Link target entities</label>
<div class="controls" id="rangeDiv">
    <select class="span12" id="link-ranges" size="5"></select>
</div>
<script type="text/x-handlebars-template" id="range-list-template">
    {{#if ranges}}
        <select class="span12" id="link-ranges" size="5">
            {{#each ranges}}
                <option value="{{this.id}}">
                    {{this.name}}
                </option>
                {{rangeOption}}
            {{/each}}
        </select>
    {{/if}}
</script>

Here is the result in the HTML page :

<select class="span12" id="link-ranges" size="5">
    <option value="1">
        data1
    </option>
    <option value="2">
        data2
    </option>
</select>

Upvotes: 0

Views: 1366

Answers (2)

Milind Anantwar
Milind Anantwar

Reputation: 82231

That is invalid syntax for change in jquery. Also ensure that you wrap the code in DOM ready event. try this:

$(document).ready(function(){
  $("#link-ranges").on('change',function() {
      console.debug("test");
  });
});

Upvotes: 2

Fisherman
Fisherman

Reputation: 6121

  $( "#link-ranges").live('change',function() {
     console.debug("test");
    };

or 

 $( "#link-ranges").on('change',function() {
     console.debug("test");
    };

Upvotes: -1

Related Questions