模态弹出窗口不适用于动态生成的列表项

时间:2016-10-19 17:45:36

标签: jquery asp.net-mvc twitter-bootstrap razor bootstrap-modal

每当用户选择UL内部LI项目内的X图像时,我都会尝试打开模态。这些项是从TempData字段内的项动态生成的。我可以将数据目标分配给静态字段,它可以正常工作,但生成的没有运气。这是我试图这样做的方式。

@if (TempData.ContainsKey("ShiftSegments"))
{
var NewShiftSegments =
    new List<ShiftSegmentData>();
NewShiftSegments =
    (List<ShiftSegmentData>)TempData["ShiftSegments"];
if (NewShiftSegments != null)
{
    foreach (var item in NewShiftSegments)
    {
        <li class="list-group-item segment" id="segment">
            <span class="glyphicon">
                <a href="#" data-toggle="modal" 
                   data-target="#shiftSegmentDeleteModal">
                    <img src="~/img/close.png" />
                </a>
            </span>&nbsp;&nbsp;
            <div href="#" class="col-md-4">
                @item.ShiftSegmentTypeName
            </div>
            <div href="#" class="badge col-md-6">
                @item.StartDT.TimeOfDay
                -
                @item.EndDT.TimeOfDay
            </div>
        </li>
    }
}
}

以下是我试图打开的模式:

<div class="modal fade" role="dialog" id="shiftSegmentDeleteModal">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title">Delete Down Time?</h4>
        </div>
        <div class="modal-body">
            Are you sure you want to delete this Down Time period?
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" id="btnConfirmSegmentDelete">Confirm</button>
            <button class="btn btn-primary" id="cancelSegmentDelete" data-dismiss="modal">
                Cancel
            </button>
        </div>
    </div>
</div>

提前感谢您的帮助。

1 个答案:

答案 0 :(得分:0)

给你的href链接类=&#34; mypopup&#34;

$(文件).on(&#39;点击&#39;,&#39; .mopopup&#39;,功能(e){$(&#39; #shiftSegmentDeleteModal&#39;)。modal(& #39; show&#39;);});