Question

我有一个下拉按钮的基本功能，通常通过AJAX加载。基本思路是单击按钮以切换下拉内容的可见性。 此部分有效。但我也希望在单击页面上的其他位置时下拉内容消失。这是代码：

 $(document).on({
     click: function() {

         var contentHolder = $(this).siblings("[class^=holder_dropdown]");

         if ($(contentHolder).is(":visible")) {

             // hide drop down
             $(contentHolder).hide();

         } else {

             // show drop down
             $(contentHolder).show();

             $(document).on({
                 click: function hideOnClick() {

                     console.log("clicked");
                     $(contentHolder).hide();
                     $(document).off('click', hideOnClick);

                 }
             });

         }

     }

 }, "[class^=dropdown]");

它工作正常，因为在页面上的其他位置单击会关闭下拉列表。但是，通过写入控制台日志，我可以看到，即使隐藏了下拉列表，它也会继续这样做，每次额外点击页面直到重新加载。这将成为我网站的内存接收器，因为它有可能扩展并在100秒内开火。

我错过了什么？

Answer 1

您正在另一个事件处理程序中绑定一个事件处理程序。事件处理程序不是替换，它们是已添加。因此，在两次单击这些特定元素后，您添加了两个负责隐藏下拉列表的事件处理程序。

确保再次取消绑定事件处理程序：

function hideOnClick() {
    if ($(contentHolder).is(":visible")) {
        // hide drop down

        $(contentHolder).hide();
        console.log("dropdown hidden");

    }
    $(document).off('click', hideOnClick);
}

$(document).on('click', hideOnClick);

Answer 2

$("*[class^='dropdown']").on("click", function(){});

Answer 3

您需要使用.on( "blur", handler )。当下拉列表失去焦点时，它只会触发一次。

Answer 4

您的代码需要如下所示：

$(document).ready(function(){
    js_Codes();

    /* The rest of your code that will not reload after ajax request */

});

$(document).ajaxComplete(function(){
    /* Here we call the codes that will reload after your ajax request */
    js_Codes();
});

function js_Codes(){

    function clickOpenDialog(){
        $('.btOpenDialog').off('click',clickOpenDialog);
        fn_open_Dialog_Click($(this).prop('alt'), function(){$('.btOpenDialog').on('click',clickOpenDialog);});
        return false;
    };

    function fn_Open_Dialog_Click(myString){
        var myArray = myString.split(';');
        /* whatever u want with your page with a string param array */

    };

    $('.btOpenDialog').on('click',clickOpenDialog);
}

享受它.. =]

文件.on点击是相乘

4 个答案: