Javascript jQuery事件触发两次

我正在使用一个通知插件

以及所选的插件。当用户在列表中选择多个项目时，将触发一个事件以显示警报，在本例中为释放通知

这在我单击通知关闭之前一直有效，当通知再次显示时，将有2个通知而不是1个通知

我认为这被称为冒泡，并将感谢任何帮助，因为我是jQuery的新手，需要帮助找到解决方案

$(function () {
    $("#box_frtv").chosen({
        width: "250px",
        max_selected_options: 1
    });

    $("#box_frtv").bind("chosen:maxselected", function () {
        $("#boxerror").freeow("error", "sample test message. Thank you.", {
            classes: ["gray", "error"],
            autoHide: true
        });
    });
});

---

您没有发布任何HTML或解释如何加载页面，也许您是通过Ajax加载页面，或者以某种方式调用事件注册两次

无论如何，在调用

bind

方法之前，可以尝试使用

unbind（）

，这将确保您只监听一次事件

在绑定前添加此行：

$("#box_frtv").unbind("chosen:maxselected");

您的代码应该如下所示：

$(function () {
    $("#box_frtv").chosen({
        width: "250px",
        max_selected_options: 1
    });

    $("#box_frtv").unbind("chosen:maxselected");
    $("#box_frtv").bind("chosen:maxselected", function () {
        $("#boxerror").freeow("error", "sample test message. Thank you.", {
            classes: ["gray", "error"],
            autoHide: true
        });
    });
});

---

希望这有帮助

的

maxselected

事件看起来有点不可靠。似乎多次触发，创建了错误消息的多个实例

我唯一能想到的就是在显示错误之前检查错误的存在。像这样的东西可能有用

HTML

<select id='box_frtv' multiple>
    <option>One</option>
    <option>Two</option>
    <option>Three</option>
</select>

<div id="boxerror" class="freeow freeow-top-right"></div>

---

两个插件都有bug，agrhh。此解决方案可能适合您。防止在100ms内重新触发“Selected:maxselecte”事件。如果你想显示唯一的框信息，请使用Brandon的方式。更新我的链接。我仍然不明白JSbin是如何工作的：）非常感谢布兰登。工作很愉快。

$(function () {
    $("#box_frtv").chosen({
        width: "250px",
        max_selected_options: 1
    });

    var $boxerror = $("#boxerror"); 
    $("#box_frtv").bind("chosen:maxselected", function () {
        //Check to see if the error is already showing. 
        //Might need a more specific class if you have multiple error types. 
        if($boxerror.find('.gray.error').length === 0){
            $boxerror.freeow("error", "sample test message. Thank you.", {
                classes: ["gray", "error"],
                autoHide: true
            });
        }
    });

});