jquery UI执行中的奇怪延迟

时间:2012-08-15 21:45:22

标签: javascript jquery jquery-ui event-propagation

我一直在研究网络应用的一部分。 javascript文件已经变得非常大,其中很大一部分负责初始化和处理jQuery UI元素和事件。为了使事物更具可读性和可维护性,我将UI初始化器和事件处理程序拆分为单独的文件。此文件在逻辑文件之前加载,由firebug的网络选项卡确认。

由于我已经拆分了UI元素,因此我注意到按钮和复选框已从单击触发器更改为双击,直到事件第一次触发。之后,单击即可执行事件。要仔细检查,我在事件处理程序中设置了一个日志语句,直到第二次单击才会打印。

这是html页面的脚本声明

<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript" src="../js/ajaxupload.3.5.js"></script>

<script type="text/javascript" src="../js/modernizer.js"></script>
<script type="text/javascript" src="../js/ui_initialization.js"></script>
<script type="text/javascript" src="../js/setCoordinates.js"></script>
<script type='text/javascript> 
  $(document).ready(function(){
    onload();
  });
<script type="text/javascript" src="../js/nav.js"></script>

onload在setCoordinates中定义,后者又在ui_initilization中触发setupElements

例如,我将html中的复选框定义为

<div id='checkboxes'>
  <input type="checkbox" id="panel" class="checkbox"/>
  <label for="panel" id='paneLabel' class="checkbox"></label>
</div>

并将ui_initilization.js中的点击事件处理为

$("#checkboxes").buttonset();
$("#paneLabel").text("Hide Panels");

$("#panel").click(function(){
  console.log("pane click");
  handlePanelButtonClick();
});

第一次单击不执行任何操作,并且不显示日志记录语句。第二次点击即可触发事件。

有没有办法解决这个问题?

1 个答案:

答案 0 :(得分:1)

如果没有实例,我很难解决这个问题。 也许这是一些默认的浏览器行为...... 或者,第一次点击时无法使用点击触发器

试试这个

$("#panel").click(function(event){
    event.preventDefault();
    event.stopPropagation();

    //your code...
});