Question

警告！这个问题不适合患有心脏疾病的人。

问题说明：加载页面后，我单击按钮以删除列表项，效果很好。之后，部分视图被重新加载（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事件，该事件调用位于我的角度文件中的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放置树视图的地方。字符串模型是从服务器接收的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函数->使用“删除项目”按钮创建treeview- >呈现页面

然后，我单击删除项目按钮（它第一次起作用）->调用了Angular（通过ajax调用服务器），并且在数据库中更新了项目->第二个ajax调用调用了控制器操作以获取带有新数据的部分视图->呈现部分视图->带有新数据的DrawCriteriaTreeView函数->名为->呈现树视图的treeview生成器函数

然后，当我单击“删除项目”按钮时，什么也没有发生。另外，我在控制台中没有任何错误。

我比较了项目删除前页面和项目删除后页面，除了应该删除的项目之外没有其他区别。

部分视图渲染后按钮不起作用

0 个答案: