Question

我有几个divs，每个form都包含input text。每个表单都有两个fields trigger。我在function之后尝试div looses 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>（意思是，不是在其中一个输入文本字段失去焦点之后，而是在新div中的全新形式获得焦点之后）。

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

})//end blur

这是jquery代码：

{{1}}

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

Answer 1

如何在div失去焦点（模糊）后触发一个功能

根据测试并在这些页面上1，2似乎模糊不会冒泡。但您可以使用解决方法。这个updated fiddle表明它根据我对您的问题的理解而运作：

表示div的所有div id='userInputID'
创建一个在div失去焦点（模糊）后触发的事件侦听器

如果您使用jQuery function on()，则可以捕获焦点并模糊事件。

$(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键，my former fiddle demo不起作用。我创建了 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>

如果您还有其他问题，请与我们联系。

一些引用

来自jQuery Api on blur

blur事件在Internet Explorer中不会出现气泡。因此，依赖于blur事件的事件委派的脚本将无法跨浏览器一致地工作。但是，从版本1.4.2开始，jQuery通过在其事件委派方法blur和focusout中将.live()映射到.delegate()事件来解决此限制。< / p>

Answer 2

.blur() documentation会让你相信你可以这样使用它;但是，我相信你必须明确地触发一个不是有效表单元素的元素上的模糊（例如输入，选择等）;

看到这个小提琴：http://jsfiddle.net/z7VYQ/

根据您对验证的评论，this fiddle向您展示了如何确定当前关注的表单，并对其他表单进行调整。

div失去焦点后如何运行一个函数？

2 个答案:

如何在div失去焦点（模糊）后触发一个功能

2013年12月更新小提琴的完全工作演示

一些引用