我编写了一个 jQuery 函数，用于具有 5 个级别的树视图，您可以单击查看下一个级别的数据，我正在处理的上一个级别似乎根本没有工作。在我看来，甚至没有调用 jQuery，因为如果它是我的控制器，它通常至少会打开没有数据的树一秒钟。下面我发布了我现在正在处理的级别的 jQuery 以及它上面的所有级别以供分析。任何建议或帮助将不胜感激！如果您也需要控制器，请告诉我。
底层 jQuery 这是不工作的部分（甚至不点击）
//Spend Category function for monthly
pa_click = function (pa_label) {
PA_ID = pa_label.getAttribute('pa_id');
var pa_details = document.getElementById('pa-details-' + PA_ID);
alert('message');
jQuery.getJSON('@Url.Action("getAjaxSCs")', { PA: pa_label.title }, function (SCS) {
pa_details.innerHTML = "";
jQuery.each(SCS, function (index, SC) {
months_html = '';
for (var i = 0; i < 12; i++) {
months_html +=
'<div id="SC-' + SC.SPEND_CATEGORY + '-' + months[i] + '" class="month-wrapper tree border-white">' +
months[i] +
'</div>';
}
pa_details.innerHTML +=
alert('message');
'<div id ="Spend-Category-' + SC.SPEND_CATEGORY + '" class="sc-wrapper tree border">' +
'<div id ="sc-title-' + SC.SPEND_CATEGORY + '" class="sc-title">' +
'<div class = "sc-label" title = "' + SC.SPEND_CATEGORY + '" SC_id="' + SC.SPEND_CATEGORY + '" onclick = "sc_click(this)">' + SC.SPEND_CATEGORY + '</div>' +
months_html +
'</div>' +
'<div id="sc-details-' + SC.SPEND_CATEGORY + '" class = "pa-details" style = "display:none">' + SC.SPEND_CATEGORY + '</div>' +
'</div>';
})
});
jQuery('#pa-details-' + PA_ID).show('slide', { direction: 'up' }, 'fast');
};
整个 jQuery
<script type="text/javascript">
jQuery(document).ready(function ($) {
var IA_ID = 0;
var months = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
// Major Program function for monthly
$(".ia-label").click(function () {
IA_ID = this.getAttribute('investment_area_id');
var ia_details = document.getElementById('ia-details-' + IA_ID);
jQuery.getJSON('@Url.Action("getAjaxMPs")', { IA: this.title }, function (MPS) {
ia_details.innerHTML = "";
jQuery.each(MPS, function (index, MP) {
months_html = '';
for (var i = 0; i < 12; i++) {
months_html +=
'<div id="MP-' + MP.MP_ID + '-' + months[i] + '" class="month-wrapper tree border-white">' +
months[i] +
'</div>';
}
ia_details.innerHTML +=
'<div id="MP-' + MP.MP_ID + '" class="mp-wrapper tree border">' +
'<div id="mp-title-' + MP.MP_ID + '" class="mp-title">' +
'<div class="mp-label" title="' + MP.MP_NAME + '" major_program_id="' + MP.MP_ID + '" onclick="mp_click(this)">' + MP.MP_NAME + '</div>' +
months_html +
'</div>' +
'<div id="mp-details-' + MP.MP_ID + '" class="mp-details" style="display:none">' + MP.MP_NAME + '</div>' +
'</div>';
})
});
jQuery('#ia-details-' + IA_ID).show('slide', { direction: 'up' }, 'fast');
});
//Sub Program function for monthly
mp_click = function (mp_label) {
MP_ID = mp_label.getAttribute('major_program_id');
var mp_details = document.getElementById('mp-details-' + MP_ID);
jQuery.getJSON('@Url.Action("getAjaxSPs")', { MP: mp_label.title }, function (SPS) {
mp_details.innerHTML = "";
jQuery.each(SPS, function (index, SP) {
months_html = '';
for (var i = 0; i < 12; i++) {
months_html +=
'<div id="SP-' + SP.SP_ID + '-' + months[i] + '" class="month-wrapper tree border-white">' +
months[i] +
'</div>';
}
mp_details.innerHTML +=
'<div id ="Sub-Program-' + SP.SP_ID + '" class="sp-wrapper tree border">' +
'<div id ="sp-title-' + SP.SP_ID + '" class="sp-title">' +
'<div class = "sp-label" title = "' + SP.SP_NAME + '" sub_program_id="' + SP.SP_ID + '" onclick="sp_click(this)">' + SP.SP_NAME + '</div>' +
months_html +
'</div>' +
'<div id="sp-details-' + SP.SP_ID + '" class = "mp-details" style = "display:none">' + SP.SP_NAME + '</div>' +
'</div>';
})
});
jQuery('#mp-details-' + MP_ID).show('slide', { direction: 'up' }, 'fast');
};
//PA function for monthly
sp_click = function (sp_label) {
SP_ID = sp_label.getAttribute('sub_program_id');
var sp_details = document.getElementById('sp-details-' + SP_ID);
jQuery.getJSON('@Url.Action("getAjaxPAs")', { SP: sp_label.title }, function (PAS) {
sp_details.innerHTML = "";
jQuery.each(PAS, function (index, PA) {
months_html = '';
for (var i = 0; i < 12; i++) {
months_html +=
'<div id="PA-' + PA.PA + '-' + months[i] + '" class="month-wrapper tree border-white">' +
months[i] +
'</div>';
}
sp_details.innerHTML +=
'<div id ="PA-' + PA.PA + '" class="sp-wrapper tree border">' +
'<div id ="pa-title-' + PA.PA + '" class="pa-title">' +
'<div class = "pa-label" title = "' + PA.PA + '" PA_id="' + PA.PA + '" onlclick = "pa_click(this)">' + PA.PA + '</div>' +
months_html +
'</div>' +
'<div id="pa-details-' + PA.PA + '" class = "sp-details" style = "display:none">' + PA.PA + '</div>' +
'</div>';
})
});
jQuery('#sp-details-' + SP_ID).show('slide', { direction: 'up' }, 'fast');
};
//Spend Category function for monthly
pa_click = function (pa_label) {
PA_ID = pa_label.getAttribute('pa_id');
var pa_details = document.getElementById('pa-details-' + PA_ID);
alert('message');
jQuery.getJSON('@Url.Action("getAjaxSCs")', { PA: pa_label.title }, function (SCS) {
pa_details.innerHTML = "";
jQuery.each(SCS, function (index, SC) {
months_html = '';
for (var i = 0; i < 12; i++) {
months_html +=
'<div id="SC-' + SC.SPEND_CATEGORY + '-' + months[i] + '" class="month-wrapper tree border-white">' +
months[i] +
'</div>';
}
pa_details.innerHTML +=
alert('message');
'<div id ="Spend-Category-' + SC.SPEND_CATEGORY + '" class="sc-wrapper tree border">' +
'<div id ="sc-title-' + SC.SPEND_CATEGORY + '" class="sc-title">' +
'<div class = "sc-label" title = "' + SC.SPEND_CATEGORY + '" SC_id="' + SC.SPEND_CATEGORY + '" onclick = "sc_click(this)">' + SC.SPEND_CATEGORY + '</div>' +
months_html +
'</div>' +
'<div id="sc-details-' + SC.SPEND_CATEGORY + '" class = "pa-details" style = "display:none">' + SC.SPEND_CATEGORY + '</div>' +
'</div>';
})
});
jQuery('#pa-details-' + PA_ID).show('slide', { direction: 'up' }, 'fast');
};
});
</script>