Question

以下是我要做的事情：

- 点击图片，unbind点击事件（在该图片上）并显示弹出窗口。

- 只要显示弹出窗口，就无法点击该图像。

- 一旦弹出窗口被解除，点击事件将再次绑定在图像上。

所以这是我的代码（图片包含在li标签中）。

$('li').click(clickOnImage());//Bind the click event with call to clickOnImage method

function clickOnImage(){
  var id=$(this).attr("id");
  console.log('you selected image with id name: '+id);
  showWithAnimation();//Show the popup with animation
}//End function



           function showWithAnimation(){    

                   console.log('animation called');

                   $('#popup').show();



                   $("#popup").css({"top": "10%", "left": "30%"}).animate({top:(($(window).height()/2)-($('#popup').outerHeight()/2))-10}, 1000, 'easeOutBounce').show();

    //As long as the popup is shown, Unbind the click event on images
                   $('li').unbind('click');
}//End function


     function hidePopUp(){

          $('#popup').hide();
           $('li').bind('click',clickOnImage());//if popup is hidden, re-bind the click event and here is the issue!

      }//End function

我在FireFox上运行时在控制台中出现此错误：

Unexpected end of file while searching for selector.  Ruleset ignored due to bad selector.

我认为问题在于函数是递归调用的。但我需要执行这样的方法。我该如何解决这个问题呢。提前完成。

Answer 1

您绑定点击错误。您正在调用该函数，而不是分配它。 [在多个地方完成]

$('li').click(clickOnImage());

需要

$('li').click(clickOnImage);

绑定到隐藏时也会遇到问题。

实际上，您不需要绑定/取消绑定。功能。只需使用元素的状态来确定是否需要隐藏或显示。

Answer 2

你绑定点击事件是错误的。

$('li').bind('click',clickOnImage);

你也可以像这样绑定

$('li').on('click',clickOnImage);

搜索选择器时意外的文件结束。由于选择器错误而忽略了规则集

2 个答案: