Один из способов добавления html в jquery работает, но почему нет другого? - PullRequest
Новая
       10

Один из способов добавления html в jquery работает, но почему нет другого?

2 голосов
/ 11 января 2012

Этот способ предоплаты работает для меня: 

    <script type="text/javascript" charset="utf-8">
        $(document).ready(function() {
            $("#learn-more-button").click(function() {
                $("#main-text").load('ajax/learn-more.html #learn-more', function() {
                                            $(this).prepend('<p> DARN </p>'); // <=== This here WORKS
                    $(this).hide().fadeIn(500); //Fade in
                    $("#main-text").animate({ // Then Animate
                        width:"500px",
                        left:'+=400px',}, 
                        400
                    );                                                                  
                });                 
            });
        });
    </script>

Этот способ предоплаты не работает для меня: 

   <script type="text/javascript" charset="utf-8">
        $(document).ready(function() {
            $("#learn-more-button").click(function() {
                $("#main-text").prepend('<p> DARN </p>'); // <=== This here doesn't work
                $("#main-text").load('ajax/learn-more.html #learn-more', function() {
                    $(this).hide().fadeIn(500); //Fade in
                    $("#main-text").animate({ // Then Animate
                        width:"500px",
                        left:'+=400px',}, 
                        400
                    );                                                                  
                });                 
            });
        });
    </script>

Почему второй способ не работает?Как это сделать, чтобы это сработало?

Я не совсем jQuery, поэтому помощь приветствуется :)

1 Ответ

5 голосов
/ 11 января 2012

При выполнении load() содержимое элемента #main-text полностью заменяется. Поэтому, если вы добавите <p>DARN</p> перед load - как во втором методе, он будет перезаписан.

В первом методе <p> добавляется в функцию обратного вызова загрузки. Вызывается после завершения загрузки.

Вы также должны объединить методы в один селектор для лучшей производительности, например: 

<script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
        $("#learn-more-button").click(function() {
            $("#main-text").load('ajax/learn-more.html #learn-more', function() {
                $(this).prepend('<p> DARN </p>')
                    .hide().fadeIn(500)
                    .animate({
                        width:"500px",
                        left:'+=400px'
                    }, 400);
            });                 
        });
    });
</script>
...