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

那是因为你从焦点事件处理程序绑定焦点事件。（.focus(...)来电与.bind('focus', ...)来电相同。）

焦点事件第一次发生时，它将绑定事件以显示和隐藏列表（但不显示列表）。

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

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

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

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

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

jQuery脚本只在第二个事件上执行

1 个答案: