是否有可能捕获Jquery div data-role =“collapsible”下的元素点击

Question

我有两个div数据元素 - 角色=“可折叠” 单击“编辑”按钮时，如何在不扩展data-role =“collapsible”的情况下捕获它？

这是我的代码

<div role="main" class="ui-content oms-content">
    <div class="myactivelabelsWrap">
        <div data-role="collapsible" data-inset="false">
            <h3>Heading 1<a class="icon-pencil-1 labelEditIcon">Edit</a></h3>
            <ul data-role="listview" class="labellistUL">
                <li class="labellist">
                    <div class="leftlable">
                        <p>Content here</p>
                    </div>
                </li>
            </ul>
        </div>
        <div data-role="collapsible" data-inset="false">
            <h3>Heading 2<a class="icon-pencil-1 labelEditIcon">Edit</a></h3>
            <ul data-role="listview" class="labellistUL">
                <li class="labellist">
                    <div class="leftlable">
                        <p>Content here</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>


$(document).on('click', '.labelEditIcon', function(event) {
      alert('clciked on edit');
});

http://jsfiddle.net/tdzfhzjy/3/

请告诉我如何在“编辑”按钮上捕获点击事件？

Answer 1

试试这个： - http://jsfiddle.net/adiioo7/tdzfhzjy/4/

<强> JS： -

$('.labelEditIcon').on('click', function (event) {
    alert('clciked on edit');
});

Answer 2

这里是你的代码

$( document ).ready(function() {
$( ".labelEditIcon" ).on( "click", function( event ) {
alert( "The mouse cursor is at (" +
event.pageX + ", " + event.pageY +
")" );

event.stopPropagation();//this will stop collasable from expanding
});
});

JsFiddle更新了代码：http://jsfiddle.net/tdzfhzjy/8/

Answer 3

您可以使用

$("div[data-role='collapsible']")