物化下拉菜單在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>