0

これが私がやろうとしていることです：

-画像をクリックすると、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.

問題は、関数が再帰的に呼び出されることだと思います。しかし、私はそのようなアプローチを実行する必要があります。どうすれば修正できますか。よろしくお願いします。

4

2 に答える 2

1

クリックを間違ってバインドしています。関数を割り当てているのではなく、呼び出しています。[複数の場所で行われる]

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

必要があります

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

非表示にするためにバインドしているときにも問題があります。

実際には、バインド/バインド解除する必要はありません。関数。要素の状態を使用して、非表示または表示する必要があるかどうかを判断します。

于 2012-09-27T12:26:32.337 に答える
1

クリックイベントをバインドしているのは間違っています。

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

このようにバインドすることもできます

$('li').on('click',clickOnImage);
于 2012-09-27T12:29:52.457 に答える