警告!这个问题不适合有心脏问题的人。
问题解释:当页面加载时我点击按钮删除列表项,工作正常。之后,重新加载部分视图(ajax 调用),但相同的删除按钮不再起作用。因此,按钮在部分视图重新加载之前有效,但不在之后。
因为我想对我的项目进行树视图,所以我正在使用Bootstrap Treeview library。原来的 Bootstrap Treeview 不足以满足我的需求,所以我在 treeview 中每个项目的右侧添加了按钮,如下图所示...
我不认为问题可能出在这段代码中,但这就是我在每个项目上实现附加按钮的方式:
Tree.prototype.template = {
list: '<ul class="list-group"></ul>',
item: '<li class="list-group-item"></li>',
indent: '<span class="indent"></span>',
icon: '<span class="icon"></span>',
link: '<a href="#" style="color:inherit;"></a>',
buttonAdd: '<button class="btn btn-default btn-flat theme-button"><i class="fa fa-plus"></i></button>',
buttonRemove: '<button class="btn btn-default btn-flat theme-button"><i class="fa fa-trash"></i></button>',
buttonGroup: '<div class="btn-group pull-right"></div>',
badge: '<span class="badge"></span>'
};
treeItem
.append($(_this.template.buttonGroup)
.append($(_this.template.buttonAdd).attr('ng-click', "showAddChildModal('" + node.Guid + "', '" + node.projectGuid + "')"))
.append($(_this.template.buttonRemove).attr('ng-click', "deleteCriteria('" + node.Guid + "', '" + node.projectGuid + "')"))
);
在代码的第二部分,您可以看到我动态添加了 ng-click 事件,该事件调用位于我的 angular 文件中的 deleteCriteria 函数。
角函数
$scope.deleteCriteria = function (guid, projectGuid) {
$.ajax({
type: 'POST',
url: '/Project/DeleteCriteria',
data: {
guid: guid,
projectGuid: projectGuid
},
cache: false,
success: function (data) {
if (data === true) {
$.ajax({
type: 'GET',
url: '/Project/UpdateCriteriaTreeViewPartial',
data: {
guid: projectGuid
},
cache: false,
success: function (data) {
if (data !== null) {
$("#criteria-tree-view-container").html($compile(data)($scope));
} else {
///
}
},
error: function (xhr, status, error) {
///
}
});
} else {
///
}
},
error: function (xhr, status, error) {
///
}
});
});
在这段代码中,我们可以看到第一个 ajax 调用调用控制器操作来删除对象(工作正常)。如果对象被删除(Ajax 返回 true),则第二个 ajax 调用访问控制器操作以获取包含新数据的部分视图(不包括已删除的列表项)。
这是部分视图代码:
@model string
@Styles.Render("~/Content/BootstrapTreeview")
@Scripts.Render("~/bundles/BootstrapTreeview")
<div class="col-lg-12">
<div class="row" style="margin-bottom: 20px;">
<h4>Kriteriji</h4>
</div>
<div id="tree" style="width: 100%;">
</div>
</div>
<script type="text/javascript">
DrawCriteriaTreeView(@Html.Raw(Json.Encode(Model)));
</script>
id为“tree”的div元素是bootstrap-treeview放置treeview的地方。字符串模型是从服务器接收到的 json 数据(带有列表项),我对其进行编码并传递给局部视图末尾的下一个 javascript 函数:
function DrawCriteriaTreeView(json) {
var jsonParsed = JSON.parse(json);
$('#tree').treeview({
data: jsonParsed,
backColor: '#323C48',
color: "white",
onhoverColor: "#303A46",
showTags: false,
selectedBackColor: "#303B46",
enableLinks: false
});
}
如您所见,此函数解析接收到的 json 并调用 treeview 函数以创建包含新数据的树视图。
解决方案非常复杂,所以我将尝试简单地解释它
页面加载->内联脚本(最后)使用通过模型接收的json调用DrawCriteriaTreeView函数->此函数然后解析json并调用BootstrapTreeview库中的treeview函数->它使用“删除项目”按钮创建树视图->呈现页
然后我单击删除项目按钮(它第一次工作)-> Angular 调用(通过 ajax 调用服务器)并在数据库中更新项目-> 第二个 ajax 调用调用控制器操作以获取包含新数据的部分视图-> 呈现部分视图-> 使用新数据调用 DrawCriteriaTreeView 函数 -> 调用树视图生成器函数 -> 渲染树视图
然后,当我单击“删除项目”按钮时,什么也没有发生。另外,我在控制台中没有任何错误。
我比较了项目预删除页面和项目后删除页面,除了删除的项目之外没有任何区别,应该是。