jQueryのワンクリックが、特定の場合には、複数の実行

Question

ファイルindex.php

<script type="text/javascript" src="//<?php echo $_SERVER["SERVER_NAME"];?>/javascript/jquery-1.10.2.min.js" ></script> 

<script type="text/javascript"> 
$(document).ready(function() { 

$(document).on('click', '#txt_my_invoices', function() { 
$.post("_my_invoices.php", function(data_my_invoices) { 
$('#span_info').html(data_my_invoices); 
}); 

}); 

}); 
</script> 

<span id="txt_my_invoices" style="cursor:pointer; border:solid 1px grey;">My invoices</span> 

<span id="span_info"></span> 

ファイル_my_invoices.php

<script type="text/javascript"> 
$(document).ready(function() { 

$(document).on('click', '.edit_invoice', function() { 
alert(this.id + ' edit invoce'); 
}); 

}); 
</script> 


<button class="edit_invoice" id="1e" type="button">Click Me!</button> 

オープン/再ロード・ファイルindex.phpた場合とid="txt_my_invoices"をクリックし、その後、ボタンClick Me!を参照してください。ボタンを1回クリックするとalert(this.id + ' edit invoce');が得られます。 しかし、もう一度id="txt_my_invoices"をクリックしてボタンをクリックすると、警告が2回表示されます。次に、id="txt_my_invoices"をクリックし、ボタンをクリックして、アラートを3回鳴らします。

アラート（実行）を1つだけ取得する方法はありますか。

.unbind()と.off()を使用しようとしましたが、他の機能を実行できないため、正常ではありません。

Answer 1

<script type="text/javascript"> 
    $(document).ready(function() { 

    $(document).on('click', '.edit_invoice', function() { 
    alert(this.id + ' edit invoce'); 
    }); 

    }); 
    </script> 

これはあなたのページに複数のイベントハンドラを引き起こし、スクリプトから何度も何度も来ています。

私が理解しているように、外部スクリプトからボタンとその動作を制御する必要があります。

あなたは以下のようなものを試すことができます：

<script type="text/javascript"> 
$(document).ready(function() { 
    var handler = function() { 
    alert(this.id + ' edit invoce'); 
    }; 
    $(".edit_invoice").unbind("click", handler); 
    $(".edit_invoice").bind("click", handler); 
}); 
</script>