JQueryギロチン：複数の変更イベントの発砲

Question

誰かが私にJQueryギロチンに問題があるかどうか教えてください。私はこれに取り組んで数時間を費やし、正しい解決策を特定することはできません。私が抱えている問題は、画像を変更した後、eventOnChangeが複数回発生することです。各イベントは、連続するイメージスワップごとに+1されます。

私は、このリンクを学び、まだ仕事解決策を見つけることができませんしている：jQuery Guillotine - Swap Image

私はイベントを殺害し、フォームがポストされたときだけ、私は必要な関連情報をキャプチャすることによってこの問題を回避働いてきたが、それはです本当に私がイベントを利用するための解決策を見つけることができないことに私は気にしています。ここで

は何が起こっているかの簡単な要約です：デフォルトのユーザアバターと

1. ページが読み込ま
2. ユーザーが（、ズームインズームギロチンや操作ごとに1件のonchangeイベントが発生内でアバターを操作することができますアウト、回転、フィット感、など）
3. ユーザーが（正しいスケーリングおよび寸法）
4. ユーザが画像が、電子を操作する
5. 新しいアバターが正常にロードされた新しいアバターを選択するために、ファイルリーダーを開きますach操作イベントは複数回発生します。たとえば、右回転すると、ユーザーが新しいアバターを選択した後に画像が2度（180度）回転します。
6. ユーザーが再度ファイルリーダーを開くと、イメージは3回発生します。それで1つ。 1 + x回ユーザーが新しいアバターを選択する...

イメージをリロードしてプラグインを初期化する前にイベントのバインドを解除しようとしましたが、問題を解決しませんでした。どんな助けでも大歓迎です！

以下に関連コードを示します。

はJavaScript：

<script type="text/javascript" charset="UTF-8"> 
function showData (data) { 
    data.scale = parseFloat(data.scale.toFixed(4)) 
    for(var k in data) { $('#'+k).html(data[k]) } 
} 

function loadInterface(picture) { 
    showData(picture.guillotine('getData')) 

    // Bind button actions 
    if(!picture.data('isBound')){ 
    picture.data('isBound', true) 
    $('#rotate_left').click(function(){ picture.guillotine('rotateLeft') }) 
    $('#rotate_right').click(function(){ picture.guillotine('rotateRight') }) 
    $('#fit').click(function(){ picture.guillotine('fit') }) 
    $('#zoom_in').click(function(){ picture.guillotine('zoomIn') }); 
    $('#zoom_out').click(function(){ picture.guillotine('zoomOut') }) 
    } 

    // Update data on change 
    picture.on('guillotinechange', function(e, data, action) { 
    console.log('guillotine onchange event called!') 
    showData(data); 
    console.log(action); 
    }) 
} 

function loadGuillotine (picture, data) { 
    if(picture.guillotine('instance')){ picture.guillotine('remove') } 

    // Load plugin 
    picture.guillotine({ 
    width: data['w'], 
    height: data['h'], 
    init: data, 
    eventOnChange: 'guillotinechange' 
    }) 
} 

$(document).ready(function() { 
    var picture = $('#useravatar') 
    var data = { w: 250, h: 250, angle: 0, scale: 1 } 

    picture.on('load', function() { 

    // Load guillotine and controls 
    picture.guillotine('remove') 
    loadGuillotine(picture, data) 
    loadInterface(picture) 

    // Transform picture to fit, center 
    picture.guillotine('fit').guillotine('center') 
    }) 
}) 

function ReloadImage(){ 
    var reader = new FileReader(); 
    reader.readAsDataURL(document.getElementById("avatar_input").files[0]); 
    reader.onload = function (oFREvent){ 
    document.getElementById("useravatar").src = oFREvent.target.result; 
    } 
} 
</script> 

とRubyページ内部：

<div id='content'> 
    <h1>Select Avatar</h1> 

    <%= form_for(@avatar, url: save_avatar_path, method: :patch) do |f| %> 
    <%= render 'shared/errors', object: @avatar %> 

    <div class='frame'> 
     <%= image_tag 'default-user-avatar.jpg', :id => :useravatar %> 
    </div> 

    <div id='controls'> 
     <button id='rotate_left' type='button' title='Rotate left'> &lt; </button> 
     <button id='zoom_out'  type='button' title='Zoom out'> - </button> 
     <button id='fit'   type='button' title='Fit image'> [ ] </button> 
     <button id='zoom_in'  type='button' title='Zoom in'> + </button> 
     <button id='rotate_right' type='button' title='Rotate right'> &gt; </button> 
    </div> 

    <div id='controls'> 
     <%= f.hidden_field :image, value: @avatar.cached_image_data %> 
     <%= f.file_field :image, :class => :form_field, :id => :avatar_input, :onChange => "ReloadImage()" %> 
    </div> 

    <ul id='data'> 
     <div class='column'> 
     <li>x: <span id='x'></span></li> 
     <li>y: <span id='y'></span></li> 
     </div> 
     <div class='column'> 
     <li>width: <span id='w'></span></li> 
     <li>height: <span id='h'></span></li> 
     </div> 
     <div class='column'> 
     <li>scale: <span id='scale'></span></li> 
     <li>angle: <span id='angle'></span></li> 
     </div> 
    </ul> 
    <% end %> 
</div> 

Answer 1

私はあなたのコードをテストしていませんが、は/あなたは私が一度に自分自身を発見した罠に陥っているを推測すると信じています。

.click（）は、ループのすべての反復で関数イベントを適用します。なぜ、複数の変更イベントが発生するのですか？（したがって、loo pが3回呼び出された後、イベントは3回連続して追加されます）。

お試しください。 one()の代わりに.click（）

もう1つの解決策は、.off（）。click（）を使用することですが、オーバーヘッドが発生します。