javascript - 输入成功的折扣码后如何停止点击事件？

Question

编辑：上面的建议不是这个问题的答案。请参阅 tymeJV 的回答。

我的表单上有一个优惠代码字段，但一旦应用它，我希望它停止。目前您可以继续输入优惠代码，它会继续打折。

Js 小提琴演示

我怎样才能阻止这种情况发生？

$("#offerapply").click(function () {
if ($("input[name='offercode']").val().toLowerCase() == "discount10")  {
    price = (price / 10) * 9;
    $("#offermsg").text('Thank you. Your 10% discount has been applied.');
}
else {
    $("#offermsg").text('Sorry, that Offer Code was not recognised.');
}
calculate();

Answer 1

在你的if真实区块中，解除绑定以防止多次折扣：

if ($("input[name='offercode']").val().toLowerCase() == "discount10")  {
    price = (price / 10) * 9;
    $("#offermsg").text('Thank you. Your 10% discount has been applied.');
    $(this).off();
}

Answer 2

看看one jquery 方法。所以你可以试试这段代码：

$("#offerapply").one('click', function () {
    // your code here
})

Answer 3

演示 - 方法 #1

$('a.remove_item').on('click',function(e) {
    alert('clicked');
   $('a.remove_item').off('click');
});

演示 - 方法 #2

$(document).ready(function(){
    $("#offerapply").one('click', function () {
        // your code here
    })
});

演示 - 方法 #3

$.fn.liveAndLetDie = function(event, callback) {
    var sel = this.selector;
    function unbind() { $(sel).die(event, callback).die(event, unbind); }
    return this.live(event, callback).live(event, unbind);
};

​</p>

$('your elements').liveAndLetDie('click', function(e) { /* do stuff */ });

演示 - 方法 #4

$('your element').live('click',function(e) {
     $('your element').die('click'); // This removes the .live() functionality
});

Answer 4

一个简单的解决方案是存储是否已应用优惠代码，但如前所述，请确保您也在进行服务器端验证。

var offercodeApplied = false;

$("#offerapply").click(function () {
if (offercodeApplied) {
    $("#offermsg").text('Offer code already applied.');
}
else if ($("input[name='offercode']").val().toLowerCase() == "discount10")  {
    offercodeApplied = true;
    price = (price / 10) * 9;
    $("#offermsg").text('Thank you. Your 10% discount has been applied.');
}
else {
    $("#offermsg").text('Sorry, that Offer Code was not recognised.');
}
calculate();