物化下拉菜单在jquery重新加载后无法工作

Question

我使用JQuery在用户单击按钮时将新内容（具有Materialize select下拉列表）加载到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（）调用中使用选择器参数。

Answer 2

让我们写下我建议的评论... 这应该做的伎俩：

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

但我建议你多像

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

UPDATE

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

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

否则，如果你想保持你的第一个想法，你必须触发选择该事件这样

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

最后更新

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

我试图重写你的东西，它的工作原理就像我建议你的。

好运

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

#second-page { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="row" id="first-page"> 
 
    <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> 
 
</div> 
 

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