jQuery.slideDown + jQuery.focus（）被调用两次而无法正常工作？

Question

我有一个奇怪的问题。

我想，点击一个复选框时，会有一个文本框slideDown()，然后拨打.focus()上的textarea，但....

1. 它不会聚焦 - 即它不会将光标放在那里。
2. 它两次调用.focus()函数？ （如console.log()所示）

任何帮助将不胜感激！

jsFiddle - http://jsfiddle.net/7nSXu/1/

开始：

点击后：



---

HTML

<div class="row">
    <div class="span3">
        <p>
            <input type="checkbox" name="items[46][46]" value="46" style="margin-bottom: 6px;" class="reveal_below" data-item-id="46">                                <strong>Product</strong>
        </p>
    </div>

    <div class=" span4 hidden_below hidden_below__46" style="display:none">
        <textarea style="width: 100%;height:6em;" placeholder="Return notes..." name="items[46][customer_item_return_notes]" id="" cols="30" rows="10"></textarea>
    </div>
    <div class="clearfix"></div>
    <hr style="display:none" class="hidden_below__46">
</div>

的JavaScript

$(function() {
    $('.reveal_below').on('click', function(e) {
        e.preventDefault();
        var item_id = $(this).attr('data-item-id');
        if ($(this).is(':checked')) {
            $('.hidden_below__' + item_id).slideDown(function() {
                console.log('CALLING FOCUS');
                $('.hidden_below__' + item_id).focus();
            })
        } else {
            $('.hidden_below__' + item_id).slideUp();
        }
    });
});

Answer 1

那是因为你要滑动2个元素以便回调执行两次，你可以使用.promise()和.done()方法，你也应该选择textarea然后调用.focus()函数：

$(function() {
    $('.reveal_below').on('change', function(e) {
        e.preventDefault();
        var item_id = $(this).attr('data-item-id');
        if (this.checked) {
            $('.hidden_below__' + item_id)
                 .slideDown()
                 .promise()
                 .done(function() {
                    // console.log('CALLING FOCUS');
                    this.find('textarea').focus();
                 });
        } else {
            $('.hidden_below__' + item_id).slideUp();
        }
    });
});

http://jsfiddle.net/4xJde/3/

Answer 2

这是因为您将注意力集中在hr上。你在这里做了太多不必要的事情。

试试 DEMO ：

$(function() {
$('.reveal_below').on('click', function(e) {
    var item_id = $(this).attr('data-item-id');
    if ($(this).is(':checked')) {
      $('.hidden_below__' + item_id).slideDown().closest('div').find('textarea').focus();
        }else {
        $('.hidden_below__' + item_id).slideUp();
    }
 });
});