jQuery数据元素奇怪的行为答案

【问题标题】：jQuery data element weird behaviorjQuery数据元素奇怪的行为
【发布时间】：2016-06-05 05:56:22
【问题描述】：

我有一组元素的数据属性叫做mod，如下图：

<div data-mod="2">Close</div>
<div data-mod="0">Ban</div>

还有一个 jQuery 函数来检查其中一个 div 是否已被点击，然后是一个警报确认来处理该操作。

$("body").on("click", "div[data-mod]", function() {
    var btn = $(this);
    if (btn.hasClass("inactive")) {
        return false;
    } else {
        var confirm = alert.Confirm("Are you sure?");
        $("body").on("click", "[data-alert=0]", function() {
            alert.Close($(this).parents("#alert"));
            return false;
        });
        $("body").on("click", "[data-alert=1]", function() {
            console.info(btn);
            btn.addClass("inactive");
        });
    }
});

问题是如果您取消警报然后单击下一个 div 并确认操作，则两个单击的 div 将获得“非活动”类，因为 var btn 现在是两个单击的 div。例如，如果有 3 个 div 并且只点击了两个，则第三个 div 将保留其原始类。

有没有办法让 var btn 只存储最后点击的 div 的值而不是两个值？

提前致谢，

马特乌斯

更新

$("body").on("click", "div[data-mod]", function() {
    var btn = $(this);
    if (btn.hasClass("inactive")) {
        return false;
    } else {
        alert.Check("Tem certeza?");
        $("body").on("click", "[data-alert=0]", function() {
            alert.Close($(this).parents("#alert"));
            return false;
        });
        $("body").on("click", "[data-alert=1]", function() {
            console.info(btn);
            btn.addClass("inactive");
        });
    }
});

警报变量是：

var alert = {
  Check: function() {
    var content = $("#contentalerts");
    $.get("/../static/alertconfirm.tpl", function(alert) {
      content.append(alert);
      content.find("#alert").last().draggable();
    });
    content.on("click", ".close", function() {
      alert.Close($(this).parents("#alert"));
    });
    $(window).on("keyup", function(e) {
      if (e.keyCode === 27) alert.Close($("#alert").last());
    });
  },
  Close: function(content) {
    content.remove();
  } 
};

【问题讨论】：

什么是alert.Confirm？
@Rajesh sn-p 已添加到问题中。

标签： jquery

【解决方案1】：

你不应该使用confirm作为你的变量名，这是一个保留字。

尝试重命名它，然后测试它是否解决了你的奇怪问题。

请参考Windows Reserved Words。

【讨论】：

【解决方案2】：

我的猜测是您在代码中使用了自定义确认或警报框。就像@Hinx 所说，confirm 是保留字。所以最好避免将它用作变量！

不管怎样，这里对你的代码做了一个小的重新排列，以便给你一个想法：

var btn;

$("body").on("click", "div[data-mod]", function() {
    btn = $(this);
    if (btn.hasClass("inactive")) {
        return false;
    } else {

        // show your custom confirm box here
        $('#my_custom_confirm_box').show();

    }
});

$("body").on("click", "[data-alert=0]", function() {
    $('#my_custom_confirm_box').hide();

    return false;
});
$("body").on("click", "[data-alert=1]", function() {    
    $(btn).addClass("inactive");

    $('#my_custom_confirm_box').hide();

    return false;
});

【讨论】：