【发布时间】：2012-08-07 14:10:09
【问题描述】：
我编写了一个 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>
【问题讨论】：
-
你包含jQuery库吗？
-
你的控制台将成为你最好的朋友
-
请注意，您的函数在
DOMReady侦听器中定义为变量，而不是全局变量。由于您没有使用var来介绍它们，这将使它们在大多数浏览器中成为全局变量，但旧版IE 不允许这样做。就这段代码的工作而言，它只是偶然的。 -
其他注意事项：由于您收到
$作为DOMReady的参数，因此在该范围内使用它而不是jQuery是安全的，即使您确实有冲突的库，比如原型。通过手动破解 HTML 字符串进行的 DOM 修改很快就会变得容易出错，并带有转义和诸如此类的东西。考虑通过库函数构建 DOM 节点而不是$('<div/>', { id = 'PA-' + PA.PA, 'class': 'sp-wrapper tree border' }).appendTo(sp_details)
标签： jquery