Laden DIV mit button in Jquery

Ich bin auf der Suche nach einer Methode, die mit Hilfe von Jquery, dass nur Lasten, die ein DIV auf der Seite, sobald es aufgerufen wird, mit einem Knopf/event. Ich habe versucht zahlreiche Funktionen, die nichts brachten, ließ mich Fragen, ob es überhaupt möglich ist. Sehen, wie ich bin ein Anfänger, Jquery, bin ich zuversichtlich, dass mein Mangel an wissen blockiert mich von der Verwirklichung dieses Kunststück. Kann jemand mich in die richtige Richtung?

Hi. Sie brauchen, um zu erweitern "lädt ein DIV auf der Seite" Teil, so können wir verstehen, was Sie Fragen.
Sagen wir, ich habe ein DIV, dass ist voll von text, oder ein DIV, das ein Bild enthält. Wenn die Seite geladen wird, möchte ich den bestimmten DIV-Element oder Objekt zu bleiben, entladen und unsichtbar. Ich nicht wollen, verwenden Sie die ausblenden-Funktion, da mein Haupt-Ziel ist die Steigerung der Geschwindigkeit und Leistung. Sobald der Benutzer auf die Schaltfläche klickt, rufen Sie das entsprechende Objekt, nur dann wird es auf die Seite geladen.
Ich sehe - nach dem Lesen dieses Kommentars kann ich etwas anderes suggerieren. Ich habe gerade eine riesige Baustelle, die genau das macht, was du redest. Ich werde es auf meine Antwort...

InformationsquelleAutor user981053 | 2011-11-01

Ich weiß nicht, ob das ist was du suchst:

<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>

Gibt es eine Möglichkeit, ich kann etwas tun, wie dieses arbeiten wird? $("#parent").html('<div>hello' , 'world </div>');
Nevermind, ich fand es heraus mit diesem $("#parent").html(function(){ var string = 'Hallo' + 'Welt'; return string; });

InformationsquelleAutor K2so

2

in javascript:
```
function loadDiv()
{
    var elem = $('div');
    elem.attr('class', 'new_div');
    elem.html('hello world');
    $('body').append(elem);
}
```
dann in Ihren html:
```
<a href="javascript:loadDiv()">Load a div</a>
```
Kann man offensichtlich eine Menge mehr robust, aber wenn Sie wollen ein besseres Beispiel sollten Sie eine Menge mehr Informationen,

Bearbeiten:
Ladezeiten zu verkürzen habe ich vor kurzem eine Website, die geladen, nur die relevanten Informationen für die jeweilige Seite, dann ajaxed in der anderen Inhalte. Diese Funktionalität wurde nur auf Anfrage, also lade ich in ein bestimmtes js-Datei auf klicken, in dem sich die extra-features für die Website. Lassen Sie uns so tun, es verwendet das gleiche Beispiel, klicken Sie wie oben...
```
function loadDiv(){
    if(typeof loadExtraContent() == "undefined")
    {
        $.ajax({
            url: '/some_file.js',
            async: false,
            success: function(data, status){
                if(status == 'success')
                {
                loadExtraContent();
                }
                }
        });
    }
    else
    {
        loadExtraContent();
    }
}
```
Damit die Funktion loadExtraContent() ist definiert in der some_file.js Datei, ich lade per ajax nur, wenn die Funktion nicht definiert ist. So dass Sie nicht stören, laden Sie das Skript auf alle, bis Sie gebraucht werden, dann nicht, laden Sie es erneut, wenn die Funktion bereits definiert ist.

Dann in some_file.js haben Sie die ursprüngliche Funktion aus diesem Beispiel...
```
function loadExtraContent()
{
    var elem = $('div');
    elem.attr('class', 'new_div');
    elem.html('hello world');
    $('body').append(elem);
}
```
Halten Sie im Verstand, ich Tat es, weil diese Art der Seite, die ich gebaut wurde MASSIV ajaxed und hatte absolut Tonnen von zusätzlichen Inhalten. Die job genannt, für diese Art von Behandlung. Dies ist die Art von übertrieben, es sei denn, der erwartete Verkehrsaufkommen hoch ist, oder Sie wollen, um die Bandbreite zu schonen, die für einige Grund (wie hosten Ihre eigenen videos und die nicht wollen, austeilen 4 MByte einen Treffer ohne Grund)

Es war mehr eine Allgemeine Anfrage, und das sieht aus wie genau das, was ich Suche, um die Aufgabe abzuschließen. Vielen Dank für die prompte Antwort. Ich habe nur eine Frage, was ist der Ort, Halter new_div?
dass gerade davon ausgegangen, dass Sie wollte, einen Stil anwenden, um die neue div. also im css müsstest du etwas wie: .new_div{ background:#d1d1d1; } oder so.

InformationsquelleAutor Kai Qing

function loadDiv() {
    $("<div class='new_div'>Hello World</div>").appendTo("body");
}

Dann in Sie html:

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

InformationsquelleAutor Sam

Verwenden .eine () - Funktion:

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

$('input[type="button"]').click(function() {
     ' do whatever you need to here.. I assume toggle()
});

InformationsquelleAutor rkw

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.