Jquery mobile jquerymobile-事件触发两次

我知道这是一个已知的问题，我已经尝试了

stopPropagation

解决方案。它不起作用。我不明白为什么会这样（我不明白为什么会这样）。不管怎样，这是代码

我有一个jQM按钮：

<a href="#" id="glossary_option1" class="ui-btn ui-btn-right ui-btn-icon-notext ui-nodisc-icon ui-alt-icon">No text</a> 

这将调用此函数，最终也会被glossary_option2、3和4调用（因此我拥有此函数）

每次我点击按钮，这个函数的两个部分都会启动。glossaryopt打开然后关闭，如控制台日志所示

我知道这是一个已知的问题，但a。我修不好，b。我已经做过很多次了。为什么现在不工作？

防止多事件绑定/触发

jQuery Mobile

的工作方式与经典web应用程序不同。根据您每次访问某个页面时如何绑定事件，它将一次又一次地绑定事件。这不是一个错误，这只是jQuery Mobile处理页面的方式。例如，请查看以下代码：

$(document).on('pagebeforeshow','#index' ,function(e,data){    
    $(document).on('click', '#test-button',function(e) {
        alert('Button click');
    });    
});

工作JSFIDLE示例：

每次访问页面#index时，单击事件将绑定到按钮#test button。通过从第1页移动到第2页并返回几次来测试它。有几种方法可以防止此问题：

解决方案1 最好的解决方案是使用pageinit来绑定事件。如果您查看一个官方文档，您会发现

pageinit

只会触发一次，就像documentready一样，因此事件无法再次绑定。这是最好的解决方案，因为您不需要像使用off方法删除事件那样的处理开销

工作JSFIDLE示例：

此工作解决方案是在前面一个有问题的示例的基础上制定的

解决方案2 在绑定事件之前删除它：

$(document).on('pagebeforeshow', '#index', function(){       
    $(document).off('click', '#test-button').on('click', '#test-button',function(e) {
        alert('Button click');
    }); 
});

工作JSFIDLE示例：

解决方案3 使用jQuery筛选器选择器，如下所示：

$('#carousel div:Event(!click)').each(function(){
    //If click is not bind to #carousel div do something
});

由于事件筛选器不是正式jQuery框架的一部分，因此可以在以下位置找到：

简而言之，如果速度是您主要关心的问题，那么解决方案2比解决方案1要好得多

解决方案4 一个新的，可能是最简单的

$(document).on('pagebeforeshow', '#index', function(){       
    $(document).on('click', '#test-button',function(e) {
        if(e.handled !== true) // This will prevent event triggering more then once
        {
            alert('Clicked');
            e.handled = true;
        }
    }); 
});

工作JSFIDLE示例：

最后说明 你最好的选择是：

$(document).off('click',"#glossary_option2").on('click',"#glossary_option2", function(){
    toggleGlos();
});

---

我一直在阅读其他Stackoverflow问题和解决方案，但唯一让我正确思考的是您的第一个JSFIDLE示例Gajotres。我现在已经修复了它，将代码移动到只运行一次的位置，这样就不会重复绑定。谢谢我很高兴能够帮助您：）问题，所以PageInit只会在用户第一次访问页面时触发一次事件，是吗？如果我想触发（比方说）ajax调用，那么解决方案2是最好的方法吗？每次访问某个页面一次且仅一次？谢谢

$(document).on('pagebeforeshow', '#index', function(){       
    $(document).on('click', '#test-button',function(e) {
        if(e.handled !== true) // This will prevent event triggering more then once
        {
            alert('Clicked');
            e.handled = true;
        }
    }); 
});

$(document).off('click',"#glossary_option2").on('click',"#glossary_option2", function(){
    toggleGlos();
});