Question

我需要在新添加的元素

上执行以下脚本

$(".select").selectmenu();

新添加的元素是：

<div class="Div11" >
  <label>Choisir Une Colonne</label>
  <select  class="select">
    <option value="Sum">Somme</option>
    <option value="Max">Max</option>
    <option value="Avarage">Moyenne</option>
    <option value="Min">Min</option>
  </select>

  <label>Choisir Une Colonne</label>
  <select  class="select">
    <option value="Col1">Col1</option>
    <option value="Col2">Col2</option>
    <option value="Col3">Col3</option>
    <option value="Col4">Col4</option>      
  </select>
</div>

我写了以下脚本：

$(document).on('change ready', 'select', function() {
  alert('ok');
  $(".select").selectmenu();
});

然而，这不起作用。这个脚本出了什么问题？

Answer 1

原因是您稍后添加select元素，加载页面时不存在。

假设<div class="Div11"></div>已修复（表示加载页面时存在），您可以更改为：

$(document).ready(function(){
    $(".Div11").on("change","select",function(event){
      alert("ok");
      $(this).selectmenu();
    })
});

Answer 2

首先，给元素一个自己的名字是多余的。完整选择器为div.Div11和select.select。也许选择一个更具描述性的类名。

其次，我认为该文档不会触发更改事件（有DOM突变事件https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Mutation_events和观察者https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver，但我不确定这些是最佳实践。因此，您只绑定页面加载时已存在的选择。动态添加代码时，必须在DOM中存在之后添加事件侦听器。

我不确定你是如何添加你的html的，但你可以这样做：

$(document).on('ready', function () {
  $('your html').appendTo(document).find('select').selectmenu();
});

编辑：但是，如果您有多个选项，则可能需要在每个选项上调用.selectmenu()。

$(document).on('ready', function () {
  $('your html').appendTo(document).find('select').each(function() {
    $(this).selectmenu();
});

Answer 3

此处无需事件。

设置html内容后，您需要调用$(".select").selectmenu();

如果您要在$.ajax()的成功处理程序中设置html内容，则需要在那里调用$(".select").selectmenu();。

如果您无法控制此操作，则需要使用MutationObserver来检查添加DOM节点的时间。

on（）无法正常工作

3 个答案: