동적으로로드 된 div

StackOverflow https://stackoverflow.com/questions/1433742

  •  07-07-2019
  •  | 
  •  

문제

동적으로로드 된 DIV 내의 특정 필드로 초점을 설정하는 적절한 방법은 무엇입니까?

$("#display").load("?control=msgs"); // loads the HTML into the DIV
$('#display').fadeIn("fast"); // display it
$("tex#header").focus();          // ?? neither that
$("input#header").focus();        // ?? nor that
$('#display', '#header').focus()  // ?? nor that
$("#header").focus();             // ?? nor that works

다음 HTML이 display div :

<div id="display">
<form id="newHeaderForm" class="dataform" action="/" method="post">
    <input id="to" type="hidden" value="22" name="to"/>
    <dl>
        <dt>Header</dt>
        <dd>
            <input id="header" class="large" type="text" name="header" value="" maxlength="128"/>
        </dd>
 </form>
 </div>

많은 감사합니다!

도움이 되었습니까?

해결책

load () 함수는 비동기 기능입니다. 로드 () 호출이 마감 된 후에 초점을 설정해야합니다. 즉,로드 ()의 콜백 함수에 있습니다. 그렇지 않으면 #header가 참조하는 요소가 아직 존재하지 않기 때문입니다. 예를 들어: 

$("#display").load("?control=msgs", {}, function() { 
  $('#header').focus();
});

이 솔루션에서도 직접 문제가 있었으므로 콜백에서 설정 타임 아웃을하고 타임 아웃에서 초점을 설정하여 요소가 존재하는 / 확인하기 위해 초점을 설정했습니다.

다른 팁

단순히 ID로 선택해 보셨습니까?

$("#header").focus();

ID가 독특해야한다면 더 구체적인 선택기가 필요하지 않습니다.

예, 이것은 아직 존재하지 않는 요소를 조작 할 때 발생합니다 (여기에 몇몇 기여자는 고유 한 ID와 좋은 지적을 만들었습니다). 나는 비슷한 문제에 부딪쳤다. 또한 요소가 곧 렌더링 될 기능에 인수를 전달해야합니다.

여기에서 확인 된 해결책은 저를 도와주지 않았습니다. 마침내 나는 상자에서 바로 작동 한 것을 발견했다. 그리고 그것은 매우 예쁘다 - 폐쇄.

대신에:

$( '#header' ).focus();
or the tempting:
setTimeout( $( '#header' ).focus(), 500 );

이 시도:

setTimeout( function() { $( '#header' ).focus() }, 500 );

내 코드에서 인수를 전달하는 테스트, 이것은 작동하지 않았으며 타임 아웃은 무시되었습니다.

setTimeout( alert( 'Hello, '+name ), 1000 );

이것은 작동합니다. 타임 아웃 진드기 :

setTimeout( function() { alert( 'Hello, '+name ) }, 1000 );

W3Schools가 언급하지 않는다는 것은 짜증납니다.

크레딧은 다음과 같습니다. makemineatriple.com.

바라건대, 이것은 여기에 오는 사람을 돕습니다.

마르타스

$("#display").load("?control=msgs", {}, function() { 
  $('#header').focus();
});

시도했지만 작동하지 않습니다.이 문제를 해결하기 위해 더 많은 조언을 해주세요. 당신의 도움을 주셔서 감사합니다

만약에

$("#header").focus();

작동하지 않으면 페이지에 헤더의 ID가있는 다른 요소가 있습니까?

Firebug를 사용하여 실행하십시오 $("#header") 그리고 그것이 무엇을 반환하는지보십시오.

OMU가 지적했듯이 문서 준비 기능에서 초점을 설정해야합니다. jQuery가 당신을 위해 그것을 제공합니다. ID에서 선택하십시오. 예를 들어 로그인 페이지가있는 경우 :

$(function() { $("#login-user-name").focus(); }); // jQuery rocks!

이것은 페이지로드에서 실행됩니다.

<script type="text/javascript">
    $(function () {
        $("#header").focus();
    });
</script>

동적으로 추가 된 항목은 DOM에 추가해야합니다 ... clone().append() jQuery를 통해 선택할 수있는 DOM에 추가합니다.

$("#header").attr('tabindex', -1).focus();

$(function (){
    $('body').on('keypress','.sobitie_snses input',function(e){
        if(e.keyCode==13){
            $(this).blur();
            var new_fild =  $(this).clone().val('');
            $(this).parent().append(new_fild);
            $(new_fild).focus();
        }
    });
});

대부분의 오류는 u가 잘못된 개체를 사용하여 예리 또는 기능을 설정하기 때문입니다. Console.log (new_fild)를 사용하십시오. 어떤 대상을 보려면, 사전이나 기능을 설정하려고합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top