折叠处理程序多次触发，用于动态生成的 jQuery Mobile 可折叠列表答案

【问题标题】：Collapse handler firing multiple times, for dynamically generated jQuery Mobile Collapsable List折叠处理程序多次触发，用于动态生成的 jQuery Mobile 可折叠列表
【发布时间】：2013-05-11 04:00:42
【问题描述】：

我正在尝试为 jQuery Mobile 中的可折叠列表动态填充和设置折叠/展开处理程序。展开处理程序按预期工作，但折叠处理程序会在展开元素时为列表中的每个项目触发一次。

<head>
    <link rel="stylesheet" href="jquery.mobile-1.2.0-alpha.1.css?gfd" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://jquerymobile.com/demos/1.2.0-alpha.1/js/jquery.mobile-1.2.0-alpha.1.js"></script>
</head>
<script>
    $(document).ready(function () {

        for (var i = 0; i < 4; i++) {

            var element = $("#listElementTemplate").clone();

            element.find('h3').append("list Element: " + i);
            $("#list").append(element);

            element.on('expand', function () {
                alert("expand: "+i);
            });

            element.collapsible();

            element.on('collapse', function () {
                alert("collapse: "+i);
            });
        }
    });
</script>

<body>
    <div id='listElementTemplate' data-role="collapsible" data-collapsed='true'>
            <h3 class='chart-elem-data'>
    </h3>

        <p id=''>Content</p>
    </div>
    <div data-role="page" class="type-interior">
        <div data-content-theme="c" id="list" data-role="collapsible-set"></div>
    </div>
</body>

【问题讨论】：

标签： javascript jquery jquery-mobile jquery-mobile-collapsible

【解决方案1】：

我对这个解决方案并不感兴趣，但我所做的是为每个列表元素创建一个唯一的名称属性，然后在展开事件中我设置一个等于展开元素的唯一名称属性的变量。然后我在折叠处理程序中使用条件逻辑，因此只有在折叠元素的名称等于先前展开的元素的名称时才会触发代码。

它不漂亮，但它似乎工作。

 $(document).ready(function () {
   //Create element name variable
   var elementName;
    for (var i = 0; i < 4; i++) {
        (function (i) {
            var element = $("#listElementTemplate").clone();
            //Use index to create unique name attribute
            element.attr("name",count);
            element.find('h3').append("list Element: " + i);
            $("#list").append(element);

            element.on('expand', function () {
                //On expand set element name to name of expanded element
                elementName = $(this).attr("name");
            });

            element.collapsible();

            element.on('collapse', function(){
                      //Use conditional logic only trigger code on the previously expanded element
              if (elementName == $(this).attr("name")){
                      //code to execute
              }else{
                          //Leave empty
                           }
    });
    }
});

【讨论】：

【解决方案2】：

这种行为不是错误。

想想看，您有一个带有 4 个可折叠的可折叠套装。只能同时扩展一个。因此，当一个展开时，另一个将触发折叠事件。我再说一遍，这是一个集合，所以他们作为一个集合。

如果您不希望它们表现得那样，那么您将需要为每个可折叠元素设置一个可折叠集。但是在这种情况下，如果您使用另一个可折叠的第一个仍将保持折叠状态。

工作示例：http://jsfiddle.net/Gajotres/AXhkF/

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>    
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>      
    </head>
    <body>  
        <div data-content-theme="c" id="list" data-role="collapsible-set">
            <div id='listElementTemplate' data-role="collapsible" data-collapsed='true'>
                <h3 class='chart-elem-data'></h3>
                <p id=''>Content</p>
            </div>
        </div>        
        <div data-role="page" id="type-interior">

        </div>      
    </body>
</html>

JS：

$(document).on('pagebeforeshow', '#type-interior', function(){       
    for (var i = 0; i < 4; i++) {
        var element = $("#list").clone().attr('id','list'+i);
        element.find('[data-role="collapsible"]').attr('id','element'+i);
        element.find('h3').append("list Element: " + i);
        element.appendTo('[data-role="page"]');

        $(document).on('expand', '#element'+i ,function (e) {
            if(e.handled !== true) // This will prevent event triggering more then once
            {
                console.log('expand = '+  $(this).attr('id'));
                e.handled = true;
            }
        });

        $(document).on('collapse', '#element'+i,function (e) {
            if(e.handled !== true) // This will prevent event triggering more then once
            {            
                console.log('collapse = ' + $(this).attr('id'));
                e.handled = true;
            }
        });

        $('#element'+i).collapsible();        
    }        
});

再次，您可以在 expend 事件期间手动折叠所有其他可折叠项，但是您将面临与示例中相同的情况。

这里基本上没有什么可以做的。

【讨论】：