jquery .animate() called on click anywhere on page

Question

I have the below jquery. It all works correctly except.... if I input a value in "name=bidz" and then click anywhere on the page, this triggers the animation but nothing else. How do I get clicks outside of my submit button to stop triggering the animation?

Does this have something to do with first clicking in the input box, then adding the value, and then the follow click is a second change?

<form action="" method="post">
    <div id="<?php echo $this->item['id']; ?>">
        <div class="ab">
            <label for="ab_input"><?php echo $this->translate('To get the auction started, you must enter a starting bid.'); ?></label>
        <span class="auction_bid_container">
            <input id="ab_input" type="text" maxlength="12"
                   class="middle nmr event-clear-focus"
                   name="bidz" value="Enter something" />
            <input id="updateBidButton" type="submit"
                   class="button grey-button num-items-button"
                   name="bidz" 
                   value="<?php echo $this->translate('submit'); ?>"/>
        </span>
        </div>
    </div>
</form>
<div class="clear mb20"></div>



$('input[name="bidz"]').live('change', function () {
    var bidz = this.value;
    $.ajax({
        type: 'post',
        url: "?module=is&controller=index&action=syy",
        dataType: "text",
        data: 'bid=' + bidz + '&id=' + id,
        beforeSend: function () {
            $('.ab').animate({
                'backgroundColor': '#ffdead'
            }, 400);
        },
        success: function (result) {
            if (result == 'ok') {
                console.log(bidz);

                $('.ab').animate({
                    'backgroundColor': '#A3D1A3'
                }, 300);
            } else {
                $('.ab').animate({
                    'backgroundColor': '#FFBFBF'
                }, 300);
            }
        }
    });
});

Answer 1

If you just want clicks outside of your submit button to stop triggering the animation, then you should attach the event handler to your submit button instead of text input. Something like this should work fine:

$('#updateBidButton').live('click', function (e) {
e.preventDefault();
var bidz = this.value;
$.ajax({
    type: 'post',
    url: "?module=is&controller=index&action=syy",
    dataType: "text",
    data: 'bid=' + bidz + '&id=' + id,
    beforeSend: function () {
        $('.ab').animate({
            'backgroundColor': '#ffdead'
        }, 400);
    },
    success: function (result) {
        if (result == 'ok') {
            console.log(bidz);

            $('.ab').animate({
                'backgroundColor': '#A3D1A3'
            }, 300);
        } else {
            $('.ab').animate({
                'backgroundColor': '#FFBFBF'
            }, 300);
        }
    }
});
});

Edit:

Also please remember that live() method was removed in jQuery 1.9, so consider replacing it with:

$(document).on('event', 'yourSelector', function() {
    // your code hear
});

So in your case it would be:

$(document).on('click', '#updateBidButton', function() {
    // ...rest of your code...
});

This will attach an event to the document object and then when you click an element it will check if the target is #updateBidButton, so it will work even if the html is generated dynamically.