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

jQuery script is only getting executed on 2nd event

本文关键字：事件 执行 第二个 脚本 jQuery      更新时间：2023-09-26

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

.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>

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

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

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

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

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

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

$(".tvar_text").each(function(i, el){
  port.setVariables($(el), null);
});
相关文章：