php - MDL- componentHandler.upgradeDom();在ajax调用之后

Question

我使用 Google Material Design Lite 进行了以下 ajax 设置:

first.php

<button class="rhm_add_button" type="button" >
    Show                      
</button>
<div class="rhm_add"></div>


<script>
jQuery(document).ready(function() {
            jQuery('.rhm_add_button').click(function(e) {
                e.preventDefault();
                jQuery.ajax({
                    type: "GET",
                    url: "<?php echo admin_url('admin-ajax.php'); ?>", 
                    dataType: 'html',
                    data: ({ action: 'rhmp_indi_form'}),
                    success: function(data){
                            jQuery('.rhm_add').html(data);
                },                  
                error: function(data)  
                {  
                alert("Error!");
                return false;
                }  
                }); 
         }); 
     }); 
</script>

Functions.php

function rhmp_indi_form_callback() {  
    $template_part_path = 'page-parts/second_page';
    get_template_part($template_part_path);
    exit;
}
add_action('wp_ajax_rhmp_indi_form', 'rhmp_indi_form_callback');
add_action('wp_ajax_nopriv_rhmp_indi_form', 'rhmp_indi_form_callback');

Second_file.php

 <div class="mdl-textfield mdl-js-textfield">                                       
    <input class="mdl-textfield__input" type="text" id="title" name="title"/>
    <label class="mdl-textfield__label" for="title">Name</label>                                        
 </div>

如您所见，我正在使用 MDL，当通过 ajax 加载内容时，它们无法正常工作，我从 github 中找到了以下解决方案:https://github.com/google/material-design-lite/issues/1043

解决方案是我需要使用“componentHandler.upgradeDom();”在 ajax 调用之后，我不确定该怎么做。

有人知道如何实现吗？

谢谢!

Answer 1

在将任何动态元素插入 DOM 后调用 componentHandler.upgradeDom()。

在你的例子中，在 jQuery('.rhm_add').html(data) 之后调用它