Question

当用户点击按钮时，我使用JQuery将新内容（带有Materialise选择下拉列表）加载到div中。但是，如果加载了新的div，则选择下拉列表不起作用。以下是我的表现，感谢任何帮助。

<script>
    $(document).ready(function(){
      $("#second-page").hide();
      $("#continue-button").click(function(){
        var $second_page_content=$("#second-page").html();
        $("#first-page").html($second_page_content);
        $("#second-page").trigger('contentChanged');
      });
     $("select").on('contentChanged', function(){
          $(this).material_select();
     });
  });
  </script>


<div class="row" id="first-page">
  <form>
  <div class = "row">
    <select id="animal">
      <option value = "bird">Bird</option>
      <option value = "cat">Cat</option>
      <option value = "Insect">Insect</option>
    </select>
    </div>
    <button class="btn waves-effect waves-light" id="continue-button">CONTINUE</button>
  </form>
</div>

<div class="row" id="second-page">
<form>
  <div class = "row">
    <select id="animal-type">
      <option value = "hen">Hen</option>
      <option value = "lion">Lion</option>
      <option value = "butterfly">Butterfly</option>
    </select>
  </div>
</form>
</div>

Answer 1

如果替换第二页，则select元素也会被替换，因此不再调用click处理程序。替换后重新附加单击处理程序或在on（）调用中使用selector参数。

Answer 2

让我们写下我的评论所建议的内容...... 这应该可以解决问题：

$('#second-page').on('contentChanged', 'select', function() {
    $(this).material_select();
});

但我建议你更多像

$("#continue-button").click(function() {
    $("#first-page").hide();
    $("#second-page").show();
});

<强>更新

我在第一次阅读时没有看到这个$("#second-page").trigger('contentChanged');，你实际上是在#second-page而不是那些选择上触发了这个事件，所以......

$('#second-page').on('contentChanged', function() {
    $(this).find('select').material_select();
});

否则，如果您想保留第一个想法，则必须在选择中触发该事件

$("#second-page").find('select').trigger('contentChanged');

最终更新

你可能会添加你在你的问题中没有写过的代码，因为这应该是一个非常简单的任务......你的表格是假的，没有任何提交，没有重新加载，只是一个神秘的{{1} } ...

我试图改写你的东西，它按我建议的那样工作。

祝你好运

＆＃13;

material_select

＆＃13;

$(document).ready(function(){
  $('#continue-button').click(function(){
    $('#first-page').hide();
    $('#second-page').show();
    $('#animal-type').material_select();
  });
});

＆＃13;

#second-page { display: none; }

＆＃13;

jquery重新加载

2 个答案: