Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
3.0k views
in Technique[技术] by (71.8m points)

jquery - Why isn't .focus() triggered when I open my modal?

I'm trying to open a modal and then have it focus on the textarea it isn't working. Was wondering is anyone could help me. I'm sure it has something to do with the execution but I'm just not sure exactly what it is. Here is some code:

$('.reportButton').click(function(){
    var $this = $(this);
    setTimeout(function(){
        $($this).siblings('.reportModal').fadeIn();
        $($this).siblings('.reportModal textarea').focus();
    }, 100);
});

$(window).on('click', function(e) {
    if ($('.reportModal').is(':visible') && $(e.target).closest('.reportModalContent').length === 0) {
        $('.reportModal').fadeOut(); // Whichever the opened one is... Close them all!
    }
});

$('.closeReportModal').click(function(){
    //$('#myModal').css({'display':'none'});
    $(this).closest('.reportModal').fadeOut();
});

Here is the report modal code:

<li>
    <button class="reportButton">Report</button>
    <div class="reportModal">
        <!-- Modal content -->
        <div class="reportModalContent">
        <form action="/report/" method="POST">
            @csrf
            <input type="hidden" name="id" value="">
            <input type="hidden" name="type" value="">
          <div class="layer">
            <div class="report-header"><h2>
                Report content
            </h2></div>
            <div class="closeReportModal" class="">&times;</div>
          </div>
          <hr>
          <div class="layer-2">
              <dl>
                  <dt>
                    Report reason:
                  </dt>
                  <dd>

                    <textarea name="body" value=""></textarea>

                  </dd>
              </dl>
          </div>
          <hr>
          <div class="layer-3">
              <dl>
                  <dt>

                  </dt>
                  <dd>
                      <button type="submit" class="report">Report</button>
                  </dd>
              </dl>
          </div>
        </form>
        </div>
    </div>
</li>

Thank you I appreciate your help.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)
等待大神解答

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...