如何运行动态添加的选择功能答案

【问题标题】：how to run function to selection which is dynamically added如何运行动态添加的选择功能
【发布时间】：2012-05-26 16:23:23
【问题描述】：

我正在向页面动态添加一些 HTML 元素。可以添加多个项目，并且可以添加不同的时间......所以很难使用“绑定”。

我决定使用内联函数——但这不适用于 Firefox……适用于所有其他浏览器。注意选项的 onClick。另外，我尝试过 onblur、onchange 和 on select。这些都不适用于 Firefox。

我的目标是在选择该选项时运行这些功能。我想我只是错过了一些东西。

$("#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>');

这是有问题的代码（在附加字符串中）

<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>

【问题讨论】：

标签： javascript jquery

【解决方案1】：

为什么内联你尝试这样的事情。

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

 });

【讨论】：

【解决方案2】：

您可以为此使用委托事件处理程序：

$('#billTasks ').on('change', 'select', function() {
  // your code
  hourlyOption(this); // here this points to select itself
});

阅读here

【讨论】：

如果您注意到每个选项都有单独的功能。

【解决方案3】：

我建议为此使用一个类。你可以做的是这样的：

function Option(html, events) {
    var o = $(html);
    for(var k in events) {
        o.bind(k, events[k]);
    }
    return o;
}

像这样使用它：

var o = new Option('<option>blah</option>', { click: function() { } ... });

而o 只是一个新的jquery 对象。所以无论如何你都可以使用它。

【讨论】：