将按钮添加到可折叠集合并获得可折叠元素的值

本文介绍了将按钮添加到可折叠集合并获得可折叠元素的值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在动态创建一个可折叠集合。如下所示

  div ='< div data-role =collapsibledata-inset =falsedata-iconpos = rightdata-collapsible =truedata-collapsed-icon =arrow-rdata-expanded-icon =arrow-d>< h3>'+ 
 row1 [name] +'< span class =ui-li-count ui-btn-up-c ui-btn-corner-alldata-iconpos =right>'+ count +'< / span>< / h3> ;< / div>';

现在我需要添加一个按钮到每个可折叠集，点击按钮后，我需要获取可折叠元素的内容，但可折叠列表不应该展开。

我该如何做？

）

$ b

工作示例：

说明

您需要了解的是如何使用：

  e.stopPropagation ）; 
 e.stopImmediatePropagation（）;

您当前的问题是点击事件正在通过按钮传播并击中可折叠，反过来打开/关闭它。可以通过if功能和 stopImmediatePropagation（） 。

代码

HTML：

 <！DOCTYPE html& 
< html> 
< head> 
< title> jQM复杂演示< / title> 
< meta name =viewportcontent =width = device-width/> 
< link rel =stylesheethref =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-role =pageid =index> 
< div data-theme =adata-role =header> 
< h3> 
首页
< / h3> 
< a href =＃secondclass =ui-btn-right>下一页< / a> 
< / div> 
 
< div data-role =content> 
< div id =Listdata-role =collapsible-setdata-theme =bdata-content-theme =d> 
< div id ='ListItem'data-role ='collapsible'data-content-theme ='b'data-collapsed ='true' 
< h3>< p>标题< / p> 
< div id =button-set> 
< input type ='button'data-theme ='b'value ='Settings'data-mini ='true'data-inline ='true'data-icon ='gear'data-icon-pos ='top'id =show-content/> 
< / div> 
< / h3> 
< p> CONTENT< / p> 
< / div> 
< / div> 
< / div> 
 
< div data-theme =adata-role =footerdata-position =fixed> 
 
< / div> 
< / div> 
< / body> 
< / html>

Javascript：

 code> $（document）.on（'pagebeforeshow'，'#index'，function（）{
 $（'＃show-content'）。 
 alert（$（'＃ListItem'）。find（'h3 p'）.text（））; 
 e.stopPropagation（）; 
 e.stopImmediatePropagation（）; 
}）; 
}）;

CSS：

 code>＃button-set {
 float：right; 
 margin-top：-20px; 
}

I am creating a collapsible set dynamically. Like below

div = '<div data-role="collapsible" data-inset="false" data-iconpos="right" data-collapsible="true" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d"><h3>'+
 row1["name"]+'<span class="ui-li-count ui-btn-up-c ui-btn-corner-all" data-iconpos="right">'+count+'</span></h3></div>';

Now i need to add a button to the each collapsible set and upon clicking on the button i need to get the collapsible element content but collapsible list should not expand.

How can i do that?

Thanks:)

解决方案

Example

Working example: http://jsfiddle.net/Gajotres/z3hsb/

Description

What you need to understand here is how to use:

e.stopPropagation();
e.stopImmediatePropagation();

Your current problem is that click event is propagating through button and hitting collapsible, which in turn opens/closes it. It can be prevented with if functions stopPropagation() and stopImmediatePropagation() are used.

Code

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width"/>
    <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-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
            <a href="#second" class="ui-btn-right">Next</a>
        </div>

        <div data-role="content">
            <div id="List" data-role="collapsible-set" data-theme="b" data-content-theme="d">
                <div id='ListItem' data-role='collapsible' data-content-theme='b' data-collapsed='true'>
                    <h3><p>Title</p>
                        <div id="button-set">
                            <input type='button'  data-theme='b' value='Settings' data-mini='true' data-inline='true' data-icon='gear' data-icon-pos='top' id="show-content"/>
                        </div>
                    </h3>
                    <p>CONTENT</p>
                </div>
            </div>
        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

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

Javascript:

$(document).on('pagebeforeshow', '#index', function(){    
    $('#show-content').on('click', function(e) {       
        alert($('#ListItem').find('h3 p').text());       
        e.stopPropagation();
        e.stopImmediatePropagation();          
    });    
});

CSS:

#button-set {
    float:right;
    margin-top: -20px;
}

这篇关于将按钮添加到可折叠集合并获得可折叠元素的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！