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

. (.focus(...) 호출은 .bind('focus', ...) 호출과 동일합니다.)

처음 포커스 이벤트가 발생하면 이벤트를 바인딩하여 목록 표시 및 숨김 (목록 표시 안 함) 이벤트를 바인딩합니다.

처음으로 흐림 이벤트가 발생하면 이벤트 핸들러는 정상적으로 작동하지만 목록이 보이지 않으면 아직 보지 못합니다.

두 번째로 포커스 이벤트가 발생하면 목록이 표시됩니다.

또한 포커스 이벤트가 발생할 때마다 목록 표시 및 숨기기를위한 또 다른 이벤트 처리기 집합이 추가됩니다. 목록을 몇 번 표시하고 숨기면 이상하게 행동하거나 부진하기 시작합니다. 결국 동시에 너무 많은 이벤트 처리기가 목록을 표시하거나 숨기려고하므로 브라우저가 중단되거나 멈 춥니 다. 당신은 그 이유 중첩 이벤트 핸들러입니다

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