Question

I am appending some HTML elements to the page dynamically. There can be multiple items added and can be added a different times…so it is hard to use a “bind”.

I decided to use an inline function—but this does not work on Firefox…works on all other browsers. Notice the onClick for the options. Also, I have tried onblur, onchange, and on select. None of these work with Firefox.

My goal is to have these functions run when the option is selected. I guess I am just missing something.

$("#billTasks").find('tr')
  .append('<td><fieldset><select>
           <option class="fixedRate" onClick="fixedOption(this)" id="billFixedSelect" value="1">Fixed Rate</option>
           <option class="hourly"  onClick="hourlyOption(this)" id="billHourlySelect" value="2"></option>
           </select>
           <input type="text" placeholder="Rate" class="fieldWidth100 rate currency" style="margin-right:10px;"/>
           <select class="schedule">
           <?php while($row = $db->sql_fetchrow($result)){
                echo "<option value=\'{$row['schedule']}\'>{$row['schedule']}</option>\\n";}?>
           </select></fieldset></td>');

This is the code in question (in the append string)

<select>
    <option class="fixedRate" onClick="fixedOption(this)" id="billFixedSelect" value="1">Fixed Rate</option>
    <option class="hourly"  onClick="hourlyOption(this)" id="billHourlySelect" value="2"></option></select>

Answer 1

Why Inline You try some thing like this.

$("#billTasks").find('select').live("change", function() {
  var SelectedValue = $(this).val();
  if (SelectedValue == '1') {
  //your task                      
  }
  if (SelectedValue == '2') {
  //Your Task                     
  }

 });