javascript - jQuery 事件触发两次

Question

我正在使用通知插件 http://pjdietz.com/jquery-plugins/freeow/

连同选择的插件 http://harvesthq.github.io/chosen/ .当用户在列表中选择超过 1 个项目时，这会触发一个事件以显示警报，或者在本例中为 freeow 通知。

在我单击通知关闭之前效果很好，当通知再次显示时，有 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
        });
    });
});

Answer 1

看起来像 chosen plugin 的 maxselected 事件有点不靠谱。似乎多次触发创建多个 freeow您的错误消息的实例。

我唯一能想到的就是在显示错误之前检查错误是否存在。这样的事情可能会奏效。

Live Demo

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>

JS

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

});