Program Tip

$ (document) .ready ()가 모두 실행 된 후 이벤트가 있습니까?

programtip 2020. 12. 6. 22:00
반응형

$ (document) .ready ()가 모두 실행 된 후 이벤트가 있습니까?


다음과 같은 index.php 페이지에 first.js 파일이 포함되어 있습니다.

$(function(){

    $("#my_slider").slider("value", 10);

});

그리고 index.php에는 동적으로 생성 된 슬라이더가 있습니다.

<?php function slidders($config, $addon)
{
    $return = '
    <script type="text/javascript">
        $(function() {
            $("#slider_'.$addon['p_cod'].'").slider({
            min: '.$config['min'].',
            max: '.$config['max'].',
            step: '.$config['step'].',
            slide: function(event, ui) {
                $("#cod_'.$addon['p_cod'].'").val(ui.value);
                $(".cod_'.$addon['p_cod'].'").html(ui.value+"'.@$unit.'");
            },
            change: function(event, ui) { 
                $("#cod_'.$addon['p_cod'].'").change();
            }
        });
            $("#cod_'.$addon['p_cod'].'").val($("#slider_'.$addon['p_cod'].'").slider("value"));
            $(".cod_'.$addon['p_cod'].'").html($("#slider_'.$addon['p_cod'].'").slider("value")+"'.@$unit.'");
    });
    </script>';
    return $return;
} ?>

문제는 내 index.php 슬라이더가 내 first.js 이후에 인스턴스화되기 때문에 거기에 값을 설정할 수 없기 때문에 "모든 $ (document) .ready () 실행 후"와 같은 이벤트가 있습니까? index.php에서 만든 슬라이더를 조작하기 위해 first.js에서 사용합니까?


마지막 $(document).ready()함수가 언제 시작되었는지 알 수 없지만 $(window).load()함수는$(document).ready()


가장 안전한 방법은 $(window).load() 내부 를 호출하는 것입니다 $(document).ready(). 이렇게하면 $(window).load()모든 $(document).ready()스크립트가 완료 될 때까지 마지막 실행 코드가 전달되지 않도록하여 모든 경우에 실행 순서를 유지합니다 . 이것이 없으면 일부 브라우저에서 $(window).load()모든 $(document).ready()스크립트가 시작된 후 모든 $(document).ready()스크립트가 완료 되기 전에 호출 될 수있는 경쟁 조건이있을 수 있습니다 .

$(document).ready(function() {
    $(window).load(function() {
        // this code will run after all other $(document).ready() scripts
        // have completely finished, AND all page elements are fully loaded.
    });
});

Ian의 대답에 따라 나는 이것을 알아 냈습니다 (테스트-작동).

jQuery(document).ready(function() {
    jQuery(document).ready(function() {
        /* CODE HERE IS EXECUTED AS THE LAST .ready-CALLBACK */
    });
});

Of course this is because the ready callbacks are invoked in the order they where assigned. At the moment, when your outer ready callback is invoked, all other scripts should have their ready callbacks already assigned. So assigning your ready callback (the inner one) now will lead to yours being the last one.


Try this neat trick/gross hack:

$(function(){
    $(function(){

        $("#my_slider").slider("value", 10);

    });
});

Looks stupid right? It works because jQuery executes event handlers in the order they were added. Adding an event handler in your event handler is about as late as you can (just make sure you're not doing this on any of the sliders accidentally; it's very easy to do).

Proof of concept. http://jsfiddle.net/9HhnX/


One of the goals of jQuery's $(document).ready() function is that the standard javascript window.onload event won't run until everything on the page is loaded (including images, etc.), even though functions can usefully start running well before that. So $(document).ready() runs as soon as the DOM hierarchy is constructed.

Given this, one option would be to run your "after everything else" script on page load. This won't guarantee that all of the $(document).ready() scripts have completed, though.

A better but more complicated option is to create a function that checks for the existence of the sliders, and if they don't exist, calls "setTimeout" on itself, so it can wait a few milliseconds and try again.

(To answer your specific question, no, there is no "after all $(document).ready() have run" callback.)


You would be better to add a unique class to your sliders rather than the #my_slider since that will only fire for the element with id = my_slider.

If you want to have the same functionality you should check out .live from jquery it will put the same functionality onto elements that are added after the binding.

If that will not work for you then when you add the new sliders you will have to go through them in the DOM and call the necessary function.

참고URL : https://stackoverflow.com/questions/3008696/after-all-document-ready-have-run-is-there-an-event-for-that

반응형