Question

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

与所选插件http://harvesthq.github.io/chosen/一起使用。当用户在列表中选择多于1个项目时，会触发事件以显示警报或在此情况下显示免费通知。

这很有效，直到我点击通知关闭，再次显示通知时，有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 }); } }); });

Answer 2

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

无论如何，您可以在调用unbind()方法之前尝试使用bind，这样可以确保您只收听一次该事件。

在bind：

之前添加此行

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

希望这有帮助！

jQuery事件两次触发

2 个答案: