jquery .animate() 点击页面上的任意位置调用

Question

我有下面的 jquery。一切正常，除了....如何在提交按钮之外获得点击以停止触发动画？

这是否与先点击输入框，然后添加值，然后点击是第二次变化有关？

<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

如果您只想在提交按钮之外单击以停止触发动画，那么您应该将事件处理程序附加到提交按钮而不是文本输入。这样的事情应该可以正常工作：

$('#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);
        }
    }
});
});

编辑：

另外请记住，live() 方法在 jQuery 1.9 中被删除了，所以请考虑将其替换为：

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

所以你的情况是：

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

这会将一个事件附加到文档对象，然后当您单击一个元素时，它会检查目标是否为 #updateBidButton，因此即使 html 是动态生成的，它也能正常工作。 p>