Question

I use the following code to run my form ajax requests but when i use the live selector on a button i can see the ajax response fire 1 time, then if i re-try it 2 times, 3 times, 4 times and so on…

I use .live because i also have a feature to add a post and that appears instantly so the user can remove it without refreshing the page…

Then this leads to the above problem… using .click could solve this but it’s not the ideal solution i’m looking for…

jQuery.fn.postAjax = function(success_callback, show_confirm) {
    this.submit(function(e) {
        e.preventDefault();
        if (show_confirm == true) {
            if (confirm('Are you sure you want to delete this item? You can\'t undo this.')) {
                $.post(this.action, $(this).serialize(), $.proxy(success_callback, this));
            }
        } else {
            $.post(this.action, $(this).serialize(), $.proxy(success_callback, this));
        }
        return false;
    })
    return this;
};
$(document).ready(function() {
    $(".delete_button").live('click', function() {
        $(this).parent().postAjax(function(data) {
            if (data.error == true) {

            } else {

            }
        }, true);
    });
});​

EDIT: temporary solution is to change

this.submit(function(e) {

to

this.unbind('submit').bind('submit',function(e) {

the problem is how can i protect it for real because people who know how to use Firebug or the same tool on other browsers can easily alter my Javascript code and re-create the problem

Answer 1

If you don’t want a new click event bound every time you click the button you need to unbind the event before re-binding it or you end up with multiple bindings.

To unbind events bound with live() you can use die(). I think the syntax using die() with live() is similar to this (untested):

$(document).ready(function(){
    $('.delete_button').die('click').live('click', function(){
        $(this).parent().postAjax(function(data){
            if (data.error == true){
            }else{
            }
        }, true);
    });
});

However, if you are using jQuery 1.7 or later use on() instead of live() as live() has been deprecated since 1.7 and has many drawbacks.
See documentation for all the details.

To use on() you can bind like this (I’m assuming the delete_button is a dynamically added element) :

$(document).ready(function(){
    $(document).off('click', '.delete_button').on('click', '.delete_button', function(){
        $(this).parent().postAjax(function(data){
            if (data.error == true){
            }else{
            }
        }, true);
    });
});

If you are using an earlier version of jQuery you can use undelegate() or unbind() and delegate() instead. I believe the syntax would be similar to on() above.

Edit (29-Aug-2012)

the problem is how can i protect it for real because people who know
how to use Firebug or the same tool on other browsers can easily alter
my Javascript code and re-create the problem

You can some-what protect your scripts but you cannot prevent anyone from executing their own custom scripts against your site.

To at least protect your own scripts to some degree you can:

• Write any script in an external js file and include a reference to that in your site
• Minify your files for release

Write any script in an external js file and include a reference to that in your site

That will make your html clean and leave no trace of the scripts. A user can off course see the script reference and follow that for that you can minify the files for release.

To include a reference to a script file:

<script type="text/javascript" src="/scripts/myscript.js"></script>
<script type="text/javascript" src="/scripts/myscript.min.js"></script>

Minify your files for release

Minifying your script files will remove any redundant spacing and shorten function names to letters and so no. Similar to the minified version of JQuery. The code still works but it is meaningless. Off course, the hard-core user could follow meaningless named code and eventually figure out what you are doing. However, unless you are worth hacking into I doubt anyone would bother on the average site.

Personally I have not gone through the minification process but here are some resources:

• Wikipedia – Minification (programming)
• Combine, minify and compress JavaScript files to load ASP.NET pages faster
• How to minify (not obfuscate) your JavaScript using PHP

Edit (01-Sep-2012)

In response to adeneo‘s comment regarding the use of one().
I know you already found a solution to your problem by unbinding and rebinding to the submit event.

I believe though it is worth to include a mentioning of one() in this answer for completeness as binding an event with one() only executes the event ones and then unbinds itself again.

As your click event, when triggered, re-loads and rebinds itself anyway one() as an alternative to unbinding and re-binding would make sense too.

The syntax for that would be similar to on(), keeping the dynamic element in mind.

// Syntax should be right but not tested.
$(document).ready(function() {
    $(document).one('click', '.delete_button', function() {
        $(this).parent().postAjax(function(data) {
            if (data.error == true) {} else {}
        }, true);
    });
});​

Related Resources

• live()
• die()
• on()
• off()
• unbind()
• delegate()
• undelegate()
• one()

---

EDIT AGAIN !!!! :

jQuery.fn.postAjax = function(show_confirm, success_callback) {
    this.off('submit').on('submit', function(e) { //this is the problem, binding the submit function multiple times
        e.preventDefault();
        if (show_confirm) {
            if (confirm('Are you sure you want to delete this item? You can\'t undo this.')) {
                $.post(this.action, $(this).serialize(), $.proxy(success_callback, this));
            }
        } else {
            $.post(this.action, $(this).serialize(), $.proxy(success_callback, this));
        }
    });
    return this;
};
$(document).ready(function() {
    $(this).on('click', '.delete_button', function(e) {
        $(e.target.form).postAjax(true, function(data) {
            if (data.error) {

            } else {

            }
        });
    });
});​