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! см. Нажмите на кнопку и один раз получите alert(this.id + ' edit invoce');. Но если я снова нажму на id="txt_my_invoices" и нажмите кнопку, а затем 2 раза предупреждение. Затем нажмите на id="txt_my_invoices" и нажмите кнопку, 3 раза предупреждение и так далее.

Как получить только одно предупреждение (исполнение)?

Попытался использовать .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>