Question

我创建了一个局部视图，我在按钮点击时使用Bootstrap Glyphicon（折叠和展开）。但是，JavaScript代码并不像我一样在这里工作使用Ajax动态添加部分视图。

我的Controller：

 public ActionResult DisplaySearchResults(int Id)
   {
    if (Id == 317)
       {
         return PartialView("~/Views/Shared/_PartialReportViews/StatisticalReport.cshtml");
       }
     else if (Id == 318)
       {
        return PartialView("~/Views/Shared/_PartialReportViews/Leading_Progeny.cshtml");
       }        
       return PartialView();
    }

我的main查看：

<div class="container">
<div id="partial"></div>

@section scripts{
    <script type="text/javascript">
        $('.search').click(function () {
            var id = $(this).data('assigned-id');
            var route = '@Url.Action("DisplaySearchResults", "Home")?id=' + id;
            $('#partial').load(route);   
        });
        var partial = $('#partial');
        partial.on('shown.bs.collapse', '.collapse', function () {
            $(this).closest('.group').find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
        }).on('hidden.bs.collapse', '.collapse', function () {
            $(this).closest('.group').find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
        });
    </script>
}
    <input class="search btn-info" type="button" value="Search" data-assigned-id="@item.ProductId" />
</div>

我的部分视图

<div class="group">
    <button type="button" value="Button" data-toggle="collapse" data-target="#demo">
        <span class="glyphicon glyphicon-plus"></span>
    </button>
    <div class="container">
        <div class="row">
            <div class=" col-sm-12">            
                @using (Html.BeginForm("Report", "Home", FormMethod.Get))
                {
                    @Html.DisplayNameFor(m => m.Name)
                    @Html.TextBoxFor(m => m.Name, new { @class = "form-control", style = "width: 155px", placeholder = Html.DisplayNameFor(n => n.Name})
                    @Html.HiddenFor(m => m.Id)
                }
            </div>
            <div id="demo" class="collapse">
                <div class="col-sm-12">
                    @Html.DisplayNameFor(model => model.StartDate)
                    @Html.TextBoxFor(m => m.StartDate, new { @class = "form-control", style = "width: 155px", placeholder = Html.DisplayNameFor(n => n.StartDate) })
                    @Html.DisplayNameFor(model => model.Distance)
                    @Html.DropDownListFor(m => m.Distance, Model.DistanceOptions, "All", new { @class = "form-control", style = "width: 150px;" })
                </div>
            </div>
        </div>
    </div>
</div>

任何人都可以指导我出错的地方吗？

Answer 1

我相信您需要将事件侦听器添加到按钮中。这似乎有效。

        $('#demo').on('shown.bs.collapse', function () { 
            debugger;
            $(this).parent().prev('button').find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
        }).on('hidden.bs.collapse', function () {
            debugger;
            console.log('hide');
            $(this).parent().prev('button').find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
        });

这里有一个链接到小提琴，只是输出'show'或'hide'到你的console.log来表明它确实有效。 https://jsfiddle.net/wuvrp0y3/

编辑以澄清：您可能需要更改函数中使用的选择器，因为$（this）的上下文不再有效。

评论后;

看来你只在页面加载时调用$（document）.ready函数一次（如你所愿），并且-new-部分视图没有注册事件。

我建议创建一个设置这些事件的函数（也预先关闭这些事件，如此;

function SetUpCollapse(){
        $('.collapse').off('click shown.bs.collapse hidden.bs.collapse');
        //This is necessary to prevent multiple calls from triggering this event multiple times.
        $('.collapse').on('click', 'shown.bs.collapse', function () {
            debugger;
            $(this).parent().prev('button').find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
        }).on('hidden.bs.collapse', function () {
            debugger;
            console.log('hide');
            $(this).parent().prev('button').find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
        });
}

然后，在你的document.ready中，调用它;

$(document).ready(function(){
SetUpCollapse();
});

我假设您使用ajax加载局部视图。无论如何，应该有一个'on completion'函数，只需在其中调用相同的函数。

IE，

  $.ajax({
    url: "SomeURLHere",
    type: "POST",
    data: {data: data},
    dataType: "html",
    success: function (html) {
      //append html
      SetUpCollapse();
    },
    error: function (xhr, ajaxOptions, thrownError) {
    }
  });

Answer 2

你的事件听众可能错过了一个活动吗？

这

$('.collapse').on('shown.bs.collapse', function () {

到

$('.collapse').on('click', '.shown.bs.collapse', function () {

使用Ajax动态添加部分视图

2 个答案: