我有以下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(); },