Question

当我点击编辑按钮，数据属性值为undefined时，请告诉我如何解决此问题？

 <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" data_attr="123" >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" data_attr="345" >Edit</a></h3>
                   <ul data-role="listview" class="labellistUL ">
                        <li class="labellist">
                            <div class="leftlable">
                                <p>Content here</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>

document.addEventListener(
    'click',
    function(event){
        if( $(event.target).is('.labelEditIcon')){
            var address_label = $(this).attr('data_attr');
            alert(address_label);
            event.stopPropagation();
        }
    },
    true // Capture event
);

http://jsfiddle.net/tdzfhzjy/15/

Answer 1

问题是，$(this)是指文档的jquery对象而不是target元素。你需要使用event.target来定位元素：

  var address_label = $(event.target).attr('data_attr');

<强> Demo

<强>建议：

将click事件附加到整个文档是不好的做法。您应该将click事件仅附加到必需元素：

$('.labelEditIcon').click(function(e){
    alert($(this).attr('data_attr'));
    e.stopPropagation();
});

使用JQuery获取类上的属性是行不通的

1 个答案:

Working Demo