MDL- componentHandler.upgradeDom(); after ajax call


MDL- componentHandler.upgradeDom(); after ajax call

我有以下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>

显然也

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调用后,我不知道如何做到这一点。

有人知道如何实现这个吗?

谢谢!

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

在您的例子中,在jQuery('.rhm_add').html(data)

之后调用它
       success: function(data){
                        jQuery('.rhm_add').html(data);
                     window.componentHandler.upgradeDom();                      },