Question

我最近遇到了一个问题，尽管在这里遇到了类似的问题，但所提供的答案似乎都不适用于我。

我有一个jQuery点击功能，并且在同一个链接上有一个'onclick'功能（它显示一个隐藏的div，并弹出一个窗口 - 意图同时发生两者）。目前，当点击链接时，弹出窗口工作正常，但需要再次点击隐藏的div才能显示 - 弹出窗口再次显示第二次点击。

我尝试过一些东西，比如将脚本移动到页面底部（根本不起作用），并完全删除onclick事件 - 但“show”方面似乎总是需要2次点击

任何指针都会非常感激！我的代码如下;

<script language="javascript">
jQuery(document).ready(function() {
$(".show").click(function(){
var left = $(this).next('span').css('left');
if ( left == '3px') {
$(this).next('span').animate({left:'148px'}, 1000);
} else {
$(this).next('span').animate({left:'3px'}, 1000);
}
return false;
});
});
</script>

<script type="text/javascript">
function showPopup(url) {
newwindow=window.open(url,'name','height=190,width=520,top=200,left=300,resizable');
if (window.focus) {this.window.focus()}
}
</script>

<!--- In Page --->
<div class="coupon"><a href="/relevantpage.html" onclick="showPopup(this.href);return(false);"   class="show"></a><span class="code">ABC1</span></div>

Answer 1

我会删除onclick事件并执行jQuery click function中的所有内容。

使用这两个事件我也有同样的问题。因此，请尝试在click事件中移动showPopup函数。

 $(".show").click(function(){

   showPopup($(this).attr("href"));

   var left = $(this).next('span').css('left');
      if ( left == '3px') {
         $(this).next('span').animate({left:'148px'}, 1000);
      } else {
         $(this).next('span').animate({left:'3px'}, 1000);
     }
   return false;
});

如果这是正确的行为，您可以在此处查看要检查的代码（其他像素值）的示例：

http://jsfiddle.net/tQGxZ/1/

Answer 2

在我看来，它可能与点击处理程序没有任何关系，但在第一次点击时，left将不等于'3px'，而是其他内容（也许'auto' }？）。但它会处于相同的位置，所以你不会看到动画。下次，您将看到它动画为'148px'的时间。在动画之后切换一个类可能会更清晰，并检查它。

JQuery点击功能需要2次点击

2 个答案: