0

これを長い間解決しようとして、jsfiddle はこのコードを再生成して問題を示すことはありません。

以前は hide() と show('slide') で処理されていた要素で、'click' イベントが 2 回トリガーされます。

show()or fadeIn(1000);を使用する場合は発生しません。内でイベント ハンドラーを移動する場合は発生しません$(document).ready(){}。

<script></script>要素の内部でこの正確な構造を使用する必要があります。どうせ変えられない。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<link href='/styles/jquery-ui-1.8.18.custom.css' rel='stylesheet' type='text/css'>
<script src='/js/jquery.js' type='text/javascript'></script>
<script src='/js/jquery-ui-1.8.18.custom.js' type='text/javascript'></script>
<script type='text/javascript'>
  $(document).ready(function() {
    $('#container').hide().delay(750).show('slide');
  });
</script>
</head>
<body>

<div id='container'>
  <div class='download'>Download</div>
  <script type='text/javascript' id='js4container'>
    $('.download').click(function() {
      alert('Trigger');
    });
  </script>
</div>

</body>
</html>

同じイベントをバインドして、内部をもう一度show()起動することを理解しています。<script></script>

回避策はありますか? =)

助けてください。ありがとう。

4

1 に答える 1

3

はいつでも使用できます.one()。これは最初のイベントでのみ発生します。.one()ただし、次の各呼び出しの間にクリックしないと、複数のトリガーが発生する可能性があり.one()ます。

$('.download').one('click', function() {
     alert('Trigger');
});

または、：を使用して毎回ハンドラーを削除し.off()ます。

$('.download').off('click').on('click', function() {
     alert('Trigger');
});

これは、またはdelegateに添付された構文で記述することもできます。#containerbody

$('body').off('click', '.download').on('click', '.download', function() {
     alert('Trigger');
});

デモ： http： //jsfiddle.net/QnfMZ/1/

これが発生する理由は、jQueryUIがヘルパー要素を使用してトランジションを作成するためです。アニメーションが発生している間、それらは正しいレイアウトなどを維持します。これらのヘルパー要素はclone()、要素のhtmlをコピーするものを使用して作成されます。これは、この場合、スクリプトもコピーすることを意味します。次に、スクリプトが実行され、2番目のハンドラーが追加されます。移行が完了すると、ヘルパークローンは削除されますが、追加のハンドラーが残ります。

于 2012-04-23T18:37:43.880 に答える