Question

所以我在网站的特定页面上遇到一些点击事件非常困难。我有一个仪表板创建工具，可以让用户连续4次返回同一页面，同时选择他们的选项/图表。每次用户单击下一个按钮时，用户第四次返回进行最终选择时，它会跳回到页面，点击甚至来自4次，然后才允许按钮单击以正确更改页面。我知道事件处理程序应该在pagecreate事件中使用，我的位于那里，但它们仍然会多次触发。我甚至用stopPropagation对它进行了测试，但这不是我如何理解问题而且它什么都不做的问题。以下是事件监听器

$(document).on('pagecreate','#mobile-newdash',function(){

    $('#builder-two').click(function(){
      $(':mobile-pagecontainer').pagecontainer('change', '#mobile-chartmenu-chartbuilder', {
    transition: 'flip',
    changeHash: false,
    reverse: true
});

    });
    $('#builder-three').click(function(){
      $(':mobile-pagecontainer').pagecontainer('change', '#mobile-chartmenu-chartbuilder', {
    transition: 'flip',
    changeHash: false,
    reverse: true
});
    });
    $('#builder-four').click(function(){
      $(':mobile-pagecontainer').pagecontainer('change', '#mobile-chartmenu-chartbuilder', {
    transition: 'flip',
    changeHash: false,
    reverse: true
});
    });

}）;

这是html

 <div role="main" class="ui-content" style="margin:0; padding:0; overflow-y:none;">
  <div id="newdash-grid">
  <div class="ui-grid-a ui-responsive" style="margin:0; padding:0;">
  <div class="ui-block-a">
  <div class="ui-bar ui-bar-a" id="block-one-newdash" style="background-color:white;">
    <p style="text-align:center; color:black; font-size:150%;">Select a chart to complete your custom dashboard.</p><div data-role="navbar"><ul><li class="premade-button-class"><a href="#mobile-chartmenu" class="ui-btn-active" id="premade-one">Premade Charts</a></li><li class="builder-button-class"><a href="#" id="builder-one">Chart Builder</a></li></ul></div>
  </div>
  </div>
  <div class="ui-block-b"><div class="ui-bar ui-bar-a" id="block-two-newdash">
    <p style="text-align:center; color:black; font-size:150%;">Select a chart to complete your custom dashboard.</p><div data-role="navbar"><ul><li class="premade-button-class"><a href="#mobile-chartmenu" class="ui-btn-active" id="premade-two">Premade Charts</a></li><li class="builder-button-class"><a href="#" id="builder-two">Chart Builder</a></li></ul></div>
  </div></div>
  <div class="ui-block-a"><div class="ui-bar ui-bar-a" id="block-three-newdash">
    <p style="text-align:center; color:black; font-size:150%;">Select a chart to complete your custom dashboard.</p><div data-role="navbar"><ul><li class="premade-button-class"><a href="#mobile-chartmenu" class="ui-btn-active" id="premade-three">Premade Charts</a></li><li class="builder-button-class"><a href="#" id="builder-three">Chart Builder</a></li></ul></div>
  </div></div><div class="ui-block-b"><div class="ui-bar ui-bar-a" id="block-four-newdash">
    <p style="text-align:center; color:black; font-size:150%;">Select a chart to complete your custom dashboard.</p><div data-role="navbar"><ul><li class="premade-button-class"><a href="#mobile-chartmenu" class="ui-btn-active" id="premade-four">Premade Charts</a></li><li class="builder-button-class"><a href="#" id="builder-four">Chart Builder</a></li></ul></div>
  </div></div></div></div>
  <div data-role="navbar"><ul><li><a href="#" class="ui-btn-active" id="clear-btn">Clear Dashboard</a></li><li><a href="#" id="save-btn">Save Dashboard</a></li></ul></div>

最让我困惑的是，在li中使用href锚定链接也存在同样的问题。我不能使用它链接页面，因为它仍然在第4个图表选择上反弹4次。

非常感谢任何帮助谢谢。

Answer 1

感谢问题Find html element which id starts with ，你应该使用它：

$(document).on('pagecreate','#mobile-newdash',function(){
    $('a[id^="builder-"]').off('click');
    $('body').on('click','a[id^="builder-"]',function(e){
        e.preventDefault();
        $(':mobile-pagecontainer').pagecontainer('change', '#mobile-chartmenu-chartbuilder', {
            transition: 'flip',
            changeHash: false,
            reverse: true
        });
    });
 });

Answer 2

您可以使用.unbind()来避免多次点击，如果不起作用也可以尝试其他点击

  $('#builder-three').unbind().click(function(){
      $(':mobile-pagecontainer').pagecontainer('change', '#mobile-chartmenu-chartbuilder', {
    transition: 'flip',
    changeHash: false,
    reverse: true
});

OR

  var counter=0;
  $('#builder-three').click(function(){
  if(counter<=0){
      $(':mobile-pagecontainer').pagecontainer('change', '#mobile-chartmenu-chartbuilder', {
    transition: 'flip',
    changeHash: false,
    reverse: true
  }
});

OR

$('#builder-three').one('click', function () { 

          $(':mobile-pagecontainer').pagecontainer('change', '#mobile-chartmenu-chartbuilder', {
        transition: 'flip',
        changeHash: false,
        reverse: true

    });

jQuery Mobile页面在更改页面后立即返回

2 个答案: