Question

我有一个手风琴，当一个面板打开时，它从服务器获取html，它作为手风琴呈现为前手风琴的孩子。当我点击儿童手风琴时，它会触发父母onactivate事件

@model IEnumerable<String>

@{
    Layout = null;
}


<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>

    <style type="text/css">

        body {
            font: normal 13px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
            color: #4f6b72;
            background: #E6EAE9;
        }

        a {
            color: #c75f3e;
        }

        #mytable 
        {
            width: 1400px;
            padding: 0;
            margin: 0;
        }

        th {
            font: bold 13px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
            color: #4f6b72;
            border-right: 1px solid #C1DAD7;
            border-bottom: 1px solid #C1DAD7;
            border-top: 1px solid #C1DAD7;
            letter-spacing: 2px;
            text-transform: uppercase;
            text-align: left;
            padding: 6px 6px 6px 12px;
            background: #CAE8EA url(images/bg_header.jpg) no-repeat;
        }

        th.nobg {
            border-top: 0;
            border-left: 0;
            border-right: 1px solid #C1DAD7;
            background: none;
        }

        td {
            border-right: 1px solid #C1DAD7;
            border-bottom: 1px solid #C1DAD7;
            background: #fff;
            padding: 3px 3px 3px 6px;
            color: #4f6b72;
        }


        td.alt {
            background: #F5FAFA;
            color: #797268;
        }

    </style>
</head>
<body>
        @Html.Hidden("SelectedDate", ViewData["SelectedDate"])
        @using (Html.BeginForm())
        {
            @Html.TextBox("DateSelector", "", new { style = "display:table-cell; width:90%", @id = "DatePicker" })
            <input type="submit" value="Get"/>
            <br />
            <div id="Nxts" class="accordion">
                @foreach (var nxtFileName in Model)
                {
                    <h3>@*<img src="@if (item.ExtractedSuccessfully()){<text>../../Images/GreenTick.png</text>} else{<text>../../Images/RedCross.png</text>}"/>*@ @nxtFileName </h3>
                        <div></div>
                }
            </div>

        }

</body>
</html>
    <script src="../../Scripts/jquery-1.9.1.js"></script>
    <script src="../../Scripts/jquery-ui-1.10.1.js"></script>
    <link rel="stylesheet" href="../../CSS/jquery-ui.css" />
<script type="text/javascript">

    $(function () {
        $("#DatePicker").datepicker();
    });

    function PopulatePanel(selectedPanel, NxtFileLocation,Date) {
        $.ajax({
            url: '@Url.Action("ExtractedXMLFiles", "Summary")',
            type: 'POST',
            async: true,
            data: { "NxtFileLocation": NxtFileLocation, "Date": Date },
            success: function (result) {
                selectedPanel.append(result);
                SetupAccordion();
            }
        });
    }

    function SetupAccordion() {
        $(".accordion").accordion({
            collapsible: true,
            heightStyle: "content"
        });
    }

    $(function () {
        $(".accordion").accordion({
            collapsible: true,
            heightStyle: "content", 
            active: false
        });
        $("#Nxts").on("accordionactivate", function (event, ui) {
            if (ui.newPanel.length > 0) {
                if (ui.newPanel.html() == "") {
                    var date = $('#SelectedDate').val();
                    var active = $("#Nxts").accordion("option", "active");
                    var text = $.trim($("#Nxts h3").eq(active).text());
                    PopulatePanel(ui.newPanel, text, date);
                }
            }
        });
    });
</script>

Answer 1

由于事件冒泡，意味着由子元素触发的事件将一直冒泡到文档对象。

在您的情况下，您需要测试触发事件的元素是使用事件target属性还是使用ui的新标题。

然后

    $("#Nxts").on("accordionactivate", function (event, ui) {
        if ($(ui.newHeader).parent().is('#Nxts') && ui.newPanel.length > 0) {
            if (ui.newPanel.html() == "") {
                var date = $('#SelectedDate').val();
                var active = $("#Nxts").accordion("option", "active");
                var text = $.trim($("#Nxts h3").eq(active).text());
                PopulatePanel(ui.newPanel, text, date);
            }
        }
    });

问题：Demo
解决方案：Demo

防止儿童手风琴传播事件

$("#Nxts").on("accordionactivate", '.accordion', function(e){
    e.stopPropagation():
});

儿童手风琴Firing Parent accordion accordionactivate event

1 个答案: