onchange for id 后，onclick 功能将不起作用

Question

When i give my input in the beginning an id, then my button works just fine with an onclick function. But if i assign an id to my button with an onchange function my button won't react to the onclickfunction while the id is correct. Can anyone help me with this.

This works:

 <input type="button" class="ok" value="Execute" id="mercedes"/>
 <script>
 $('#mercedes').on('click', function(e){
 ......
 </script>

This doesn't work:

 <select id="abc" onchange="func()">
   <option  value="volvo" id="1">Volvo</option>
   <option value="saab" id="2">Saab</option>
   <option value="mercedes" id="3">Mercedes</option>
   <option value="audi" id="4">Audi</option>
 </select>
 <input type="button" class="ok" value="Execute"/>
 <script>
     function func() {
         var b = document.getElementById("abc");
         var a= b.options[b.selectedIndex].value;
         $('input.ok').attr('id', a);
      }
 </script>
 <script>
 $('#mercedes').on('click', function(e){
 ......
 </script>

When I select mercedes from the options my input will get the id mercedes, but the onclick function still doesn't work.

Answer 1

$('#mercedes').on('click', function(e){

This is happening when the page loads. The element does not have an id yet. Inside the on change you need to attach the event once the id is set.

function func() {
     var b = document.getElementById("abc");
     var a= b.options[b.selectedIndex].value;
     $('input.ok').attr('id', a);
     $('#' + a).on('click', function(e){
          // do something
     });
  }

Fiddle: http://jsfiddle.net/bt3dsrbx/