我编写了一个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>
答案 0 :(得分：4)
'<div class = "pa-label" title = "' + PA.PA + '" PA_id="' + PA.PA + '" onlclick = "pa_click(this)">' + PA.PA
你拼错了onclick，应该修复它！
旁注：它更容易＆amp;为这种情况创建一个实时DOM事件处理程序更好的性能。添加如此多的onclick事件（特别是在IE中，会在每个项目上创建大量的脚本事件（最终都是相同的））！
只是做：
$(document).on('click', '.pa-label', function (e) {
pa_click(this);
});