兒童手風琴發燒家長手風琴accordionactivate事件

我有一個手風琴，當面板打開時，它從服務器獲取html，它作爲手風琴呈現爲前手風琴的孩子。當我點擊了兒童手風琴它激發父onactivate事件兒童手風琴發燒家長手風琴accordionactivate事件

@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>

來源

2013-04-01 David

這是因爲事件bubling的，是指一個子元素，將泡一路高達文檔對象觸發的事件。

在你的情況，你需要在該事件被觸發的元素是否是在使用事件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(): 
});

來源

2013-04-01 07:14:04

有沒有辦法從發射父母事件停止孩子？ – David

@ user351709您可以停止傳播子事件 –

這就是我一直在尋找 – David

兒童手風琴發燒家長手風琴accordionactivate事件

回答

相關問題