div失去焦点后如何运行函数? [英] How to run a function after div has lost focus?

问题描述

我有几个divs，每个divs都包含一个form.每个表格都有两个input text fields. 我正在尝试在div looses focus之后trigger一个function(意味着，不是在输入文本字段之一失去焦点之后，而是在新div中的全新形式获得焦点之后).

I have several divs that each contain a form. Each of the forms has two input text fields. I am trying to trigger a function after div looses focus (meaning, not after one of the input text fields looses focus, but after totally new form in new div gains focus).

<div class='userInput' id='userInputID'>
   <div class='col1'>
    <form id='form1' method='post' action='BuyOrder.php'>
      <input type='text' name='r1' id='r1' value=''><br />
      <input type='text' name='b1' id='b1' value=''><br />
      <button id='button1' class='sendButton'>send</button>
    </form>
   </div>          
   <div class='colX'>
     <form id='formX' method='post' action='BuyOrder.php'>
      <input type='text' name='rX' id='rX' value=''><br />
      <input type='text' name='bX' id='bX' value=''><br />
      <button id='buttonX' class='sendButton'>send</button>
     </form>
   </div>    
   <div class='col2'>
     <form id='form2' method='post' action='BuyOrder.php'>
       <input type='text' name='r2' id='r2' value=''><br />
       <input type='text' name='b2' id='b2' value=''><br />
       <button id='button2' class='sendButton'>send</button>
     </form>
   </div>
</div>

这是jquery代码:

And here is jquery code:

$('#userInputID').children().blur(function(){        
//some code   

})//end blur

基本上，我希望函数在类col1，colx或col2的任何div失去焦点时运行. 上面的jquery代码甚至不会触发.焦点输出不起作用，因为即使每个div仍具有焦点，它也会在每个输入文本字段失去焦点之后触发.

Basically, I want the function to run when any of the divs with the class col1, colx or col2 looses focus. The jquery code above never even fires. Focusout doesn't work because that fires after each input text fields loose focus, even if the same div still has focus.

推荐答案

如何在div失去焦点(模糊)后触发函数

基于测试和以下页面 1 ， 2 似乎模糊不会冒泡.但是您可以使用一种解决方法.此更新的小提琴表示它可以根据我对您问题的理解来工作:

How to fire a function after div has lost focus (blur)

Based on tests and on these pages 1, 2 it seems that blur does not bubble. But you can use a workaround. This updated fiddle shows that it works according to my understanding of your question:

• 对于作为div id='userInputID'的子级的每个div
• 创建一个事件侦听器，该侦听器在div失去焦点(模糊)后触发

• for each div that is a child of the div id='userInputID'
• create an event listener that fires after the div has lost focus (blur)

如果您使用 jQuery函数on() ，则可以捕获焦点和模糊事件. /p>

If you use the jQuery function on() you can capture focus and blur events.

$(document).ready(function() {
    $( "#userInputID" ).on( "blur", "div.onBlurTest", function() {        
        $( this ).toggleClass( "hasFocus" );
        $( this ).addClass( "hasLostFocus" );      
        $( this ).children("h2").text("Using on instead of blur");        
    }); 
});

还有html

<div class="userInput" id="userInputID">              
  <div class="col2 onBlurTest">
    <h2>Using on instead of blur</h2>
    <form id="form2" method="post" action="BuyOrder.php">
      <input type="text" name="r2" id="r2" value="" />
      <br />
      <input type="text" name="b2" id="b2" value="" />
      <br />
      <button id="button2" class="sendButton">send</button>
    </form>
  </div>
</div>

完整的演示工作正在进行中，2013年12月更新

正如克里斯·罗克韦尔(Chris Rockwell)指出的那样，如果使用Tab键，则我以前的小提琴演示不起作用.我创建了 也可以使用Tab键的叉子

Fully working demo at fiddle with update dec 2013

As Chris Rockwell pointed out my former fiddle demo does not work if the tab key is used. I created a fork that works with the tab key as well

$(document).ready(function() {
  // Handler for .ready() called.

  $( "#userInputID" ).on( "focus", "div.onBlurTest", function() {
        $( this ).toggleClass( "hasFocus" );
        $( this ).removeClass( "hasLostFocus" );                 
  });

  $( "#userInputID" ).on( "blur", "div.onBlurTest", function() {
        $( this ).toggleClass( "hasFocus" );
        $( this ).removeClass( "hasLostFocus" );      
  });    
});

和简化的HTML

<div class="userInput" id="userInputID">              
      <div class="col2 onBlurTest">        
        <form id="form2" method="post" action="BuyOrder.php">
          <input type="text" name="r2" id="r2" value="" />
        </form>
      </div>
      <div class="col2 onBlurTest">     
        <form id="form2" method="post" action="BuyOrder.php">
            <input type="text" name="b2" id="b2" value="" />
        </form>
      </div>        
    </div>

如果您还有其他问题，请告诉我.

Please let me know if you have further questions.

从模糊的jQuery Api

blur事件在Internet Explorer中不会冒泡.因此，依靠blur事件进行事件委派的脚本将无法在所有浏览器中一致地工作.但是，从版本1.4.2开始，jQuery通过在其事件委托方法.live()和.delegate()中将blur映射到focusout事件来解决此限制.

The blur event does not bubble in Internet Explorer. Therefore, scripts that rely on event delegation with the blur event will not work consistently across browsers. As of version 1.4.2, however, jQuery works around this limitation by mapping blur to the focusout event in its event delegation methods, .live() and .delegate().

这篇关于div失去焦点后如何运行函数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！