javascript - jQuery 脚本仅在第二个事件上执行

Question

代码如下，我坚持其背后的推理，但焦点/模糊事件仅在事件第二次发生时被激活。我目前不担心其他任何事情，只担心为什么只有在第一次之后才在任何事情上运行。

JS:

var App = function () {
    this.page = window.location.pathname.split("/public/portal/")[1].split("/")[0];
}

$.extend(App.prototype, {

    // This will set the variables in the box and display / hide
    setVariables: function (ele, vars) {
        this.variables = vars || variables;
        var list = $("#page_variables .text_variables");

        // Create the variable box
        $('li', list).remove(); // first remove all variables currently in the box
        console.log(ele);

        ele.bind('focus', function () {
            list.fadeIn();
        })
            .bind('blur', function () {
            list.fadeOut();
        });
    }
});

(function ($, undefined) {
    $(".tvar_text").focus(function () {
        port.setVariables($(this), null);
    });
})(jQuery);

HTML:

<div id="page_variables">
    <div class="text_variables" style="display:none">
        <ul>
            <strong style="text-decoration: underline;">VARIABLES</strong>
            <li>{provider}</li>
            <li>{date}</li>
            <li>{callerid}</li>
            <li>{time}</li>
            <li>{location}</li>
            <li>{recipient}</li>
            <li>{misc1}</li>
            <li>{misc2}</li>
            <li>{misc3}</li>
            <li>{misc4}</li>
        </ul>
    </div>
</div>

        <textarea class="tvar_text" name="Vtmpl" cols="50" rows="10" style="min-height: 200px; overflow: hidden; resize: none; height: 50px;"></textarea>

Answer 1

那是因为您正在从焦点事件处理程序绑定(bind)焦点事件。 (.focus(...) 调用与 .bind('focus', ...) 调用的作用相同。)

第一次发生焦点事件时，会绑定(bind)显示和隐藏列表的事件(但不显示列表)。

第一次发生模糊事件时，事件处理程序工作正常，但由于列表不可见，因此您看不到它。

第二次焦点事件发生时，将显示列表。

此外，每次发生焦点事件时，它都会添加另一组事件处理程序来显示和隐藏列表。如果您多次显示和隐藏列表，它将开始表现奇怪和/或开始变得迟缓。最终它会崩溃/卡住浏览器，因为有太多事件处理程序试图同时显示或隐藏列表。

要在与选择器匹配的每个元素上调用该函数，您可以使用 each 方法:

$(".tvar_text").each(function(i, el){
  port.setVariables($(el), null);
});