Загрузить DIV с помощью кнопки в Jquery - PullRequest
1 голос
/ 02 ноября 2011

Я ищу метод, использующий Jquery, который загружает DIV на страницу только после его вызова с помощью кнопки / события.Я пробовал многочисленные функции безрезультатно, оставляя меня удивляться, если это вообще возможно.Видя, как я новичок в Jquery, я уверен, что отсутствие знаний мешает мне совершить этот подвиг.Кто-нибудь может указать мне правильное направление?

Ответы [ 4 ]

2 голосов
/ 02 ноября 2011

в javascript:

function loadDiv()
{
    var elem = $('div');
    elem.attr('class', 'new_div');
    elem.html('hello world');
    $('body').append(elem);
}

, а затем в html:

<a href="javascript:loadDiv()">Load a div</a>

Очевидно, вы можете быть намного более надежным с этим, но если вам нужен лучший пример, вы должны предоставитьмного больше информации

Редактировать: Чтобы минимизировать время загрузки, я недавно создал сайт, который загружал только релевантную информацию для конкретной страницы, а затем добавлял другие материалы.Эта функциональность была доступна только по запросу, поэтому я щелкаю в конкретном js-файле, который содержит дополнительные функции для сайта.Давайте притворимся, что он использовал тот же пример click, что и выше ...

function loadDiv(){
    if(typeof loadExtraContent() == "undefined")
    {
        $.ajax({
            url: '/some_file.js',
            async: false,
            success: function(data, status){
                if(status == 'success')
                {
                loadExtraContent();
                }
                }
        });
    }
    else
    {
        loadExtraContent();
    }
}

Итак, функция loadExtraContent () определена в файле some_file.js, который я загружаю через ajax, только если функция не определена.Таким образом, вы вообще не будете загружать скрипт до тех пор, пока он не понадобится, и не загружайте его снова, если функция уже определена.

Тогда в some_file.js у вас есть оригинальная функция из этого примера ...

function loadExtraContent()
{
    var elem = $('div');
    elem.attr('class', 'new_div');
    elem.html('hello world');
    $('body').append(elem);
}

Имейте в виду, что я сделал это таким образом, потому что сайт, который я создал, был МАКСИМАЛЬНО настроен и содержал абсолютное количество дополнительного контента.Работа требовала такого лечения.Это своего рода излишнее количество, если ожидаемый трафик не высок или вы по какой-то причине не хотите экономить трафик (например, размещаете свои собственные видео и не хотите разыгрывать 4 мегабита без какой-либо причины)

1 голос
/ 02 ноября 2011

Не знаю, ищите ли вы это:

<html>
    <head>
        <script type="text/javascript" src="jquery-1.4.4.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("input[name='btn']").click(function() {
                    $("#parent").html("<div>content of the div</div>");
                });
            });
        </script>

    </head>

    <body>
        <div id="parent">       
        </div>
        <form>
            <input type="button" id="btn" name="btn" value="Button" />
        </form>
    </body>
</html>
0 голосов
/ 02 ноября 2011

Используйте функцию .one ():

$('input[type="button"]').one('click', function() {
     $('#parent').load
});

$('input[type="button"]').click(function() {
     ' do whatever you need to here.. I assume toggle()
});
0 голосов
/ 02 ноября 2011
function loadDiv() {
    $("<div class='new_div'>Hello World</div>").appendTo("body");
}

Тогда в тебе html:

<a href="javascript:loadDiv();">Load Div</a>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...