Question

我在页面的标题部分使用了2个锚标记，我想捕获它们上的点击事件，这样我就可以打开面板了。如果我使用按钮而不是锚标签，我可以使用他们的id轻松地捕捉它们，例如;

 $(document).on('click', function(evt){
        var target = evt.target;
        var targetId = target.getAttribute('id');

        if(targetId === 'openRightPanel'){
            $('.right-panel').panel('open');
            evt.stopImmediatePropagation();
            evt.preventDefault();
        }
}

但如果我使用锚标签，我就无法获得这样的点击事件;

if(targetId === 'openRightPanel'){
            $('.right-panel').panel('open');
            evt.stopImmediatePropagation();
            evt.preventDefault();
}

即使我的锚标签的id为openRightPanel。

我意识到jQuery mobile正在我的html中创建一些新的div，所以我开始使用这段代码来捕获点击事件;

    while (target !== null) {
                if(target['id'] === 'openLeftPanel'){
                    $('.left-panel').panel('open');
                    isPreventOn = true;
                }
                else if(target['id'] === 'openRightPanel'){
                    $('.right-panel').panel('open');
                    isPreventOn = true;
                }
                target = target.parentNode;
            }

这个工作正常但在android 4.1上创建了一些问题并且有一个while循环来捕获点击事件对我来说似乎不对。

所以我的问题是如何在没有循环的情况下捕获在 jQuery mobile 中对这些锚标记进行的点击事件，或者是否有不同的方式来获取该事件？这些是我想要的锚标签;

<div data-role="header">
    <h1>title</h1>
    <a id="openLeftPanel">open</a>
    <a id="openRightPanel">open</a>
</div><!-- /header -->

Answer 1

您可以直接在选择器上单击事件

$("#openLeftPanel").off('click').on('click', function(evt){

});

$("#openRightPanel").off('click').on('click', function(evt){

});

Answer 2

不要将click事件附加到文档，将其附加到锚元素。

你有：

$(document).on('click', function(evt){...});

你应该：

$('[data-role="header"] a').on('click',function(evt){...});

或者，只需将两者的功能分开：

$('#openLeftPanel').on('click',function(evt){...});
$('#openRightPanel').on('click',function(evt){...});

在jQuery mobile上选择一个锚标签

2 个答案: