Question

我有以下jquery。这一切都正常工作，除了....如果我在“name = bidz”中输入一个值然后点击页面上的任何地方，这会触发动画，但没有别的。如何获取提交按钮之外的点击以停止触发动画？

这是否与首先在输入框中单击，然后添加值，然后跟随点击是第二次更改有关？

<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);
        }
    }
});
});

修改

另请注意，jQuery 1.9中删除了live()方法，因此请考虑将其替换为：

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

所以在你的情况下，它将是：

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

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

jquery .animate（）调用单击页面上的任何位置

1 个答案: