1

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

这是jQuery代码：

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

})//end blur

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

4

2 回答 2

0

div失去焦点后如何触发函数（模糊）

根据测试和这些页面 1，2似乎模糊不会冒泡。但是您可以使用一种解决方法。这个更新的小提琴表明它根据我对您的问题的理解起作用：

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

如果您使用jQuery 函数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 键，我以前的小提琴演示将不起作用。我创建了一个也可以与 tab 键一起使用的 fork

$(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()

于 2013-08-03T04:56:24.423 回答
0

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

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

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

于 2013-08-03T05:00:28.490 回答