Rufen Sie die gleiche jQuery-Funktion sowohl auf Last und klicken Sie auf

In meinem "update" - Seiten habe ich oft die Notwendigkeit, rufen Sie die gleiche jQuery-Funktion sowohl beim laden der Seite " und klicken Sie einige Kontrollkästchen, die meist wie diese:

function foo(){
    if ($('#mycheckbox').is(':checked')){
        $('.myclass').hide();
    } else {
        $('.myclass').show();
    }
}

$(function() {

    foo(); //this is launched on load
    $('#mycheckbox').click(function(){
        foo(); //this is launched on checkbox click
    })  

});

Beim laden der Seite die checkbox könnte geprüft werden oder nicht, je nach Datenbank-Werte: das ist der Grund, warum ich das Bedürfnis haben, starten Sie die foo(); load

Gut, dies funktioniert sehr gut, aber ich habe mich immer gefragt, wenn... gibt es eine bessere oder elegantere Lösung?
Vielen Dank im Voraus

InformationsquelleAutor Ivan | 2011-11-23

1

Einen Weg, es zu tun (unter der Annahme, dass Ihre Website enthält eine server-side-code-Komponente) wäre das anzeigen/verstecken der Eintrag in der server-Seite Rendern, als angemessen. Dies bedeutet, dass es keine screen 'flicker' (wie gering es ist) beim laden der Seite.

InformationsquelleAutor Paddy

Die besten, die Sie tun können ist dieses:

$(function() {

    foo(); //this is launched on load
    $('#mycheckbox').click(function(){
        foo(); //this is launched on checkbox click
    })  

});

$(function() {
    foo(); //this is launched on load
    $('#mycheckbox').click(foo);  

});

InformationsquelleAutor Dogbert

Könnten Sie die trigger() - Funktion, um das Ereignis auszulösen sofort;

$('#mycheckbox').click(function (){
    if ($('#mycheckbox').is(':checked')){
        $('.myclass').hide();
    } else {
        $('.myclass').show();
    }
}).trigger('click');

Allerdings zu beachten, dass dies auch auslösen, die anderen Klick-Handler, die Sie definiert haben, auf das element.

Alternativ könnten Sie schreiben, eine kleine jQuery-plugin, um es für Sie tun;

jQuery.fn.nowAndOn = function (event, handler) {
    handler();

    this.bind(event, handler);

    return this; //support chaining
};

Und Sie würde es nutzen wie;

$(function() {
    $('#mycheckbox').nowAndOn('click', function (){
        if ($('#mycheckbox').is(':checked')){
            $('.myclass').hide();
        } else {
            $('.myclass').show();
        }
    });
});

Jedoch, das problem mit diesem ist, dass im inneren der click-handler, this ist normalerweise das aktuelle element; in der Erwägung, dass durch den Aufruf handler(); wie wir hier tun - this würde, zeigen Sie auf window statt (dies ist nicht relevant für die genaue snippet, das Sie geschrieben, als Sie nicht this).

Fix this, könnten wir hinzufügen einiger Komplexität und die Nutzung der Funktion.rufen Sie Methode, um den Wert this;

jQuery.fn.nowAndOn = function (event, handler) {
    this.each(function () {
        handler.call(this);
    });

    this.bind(event, handler);

    return this;
};

Allerdings werden Sie trotzdem ein problem haben, wenn du dich auf ein Event-Objekt übergeben wird...

InformationsquelleAutor Matt

könnte man vermeiden, die zweite Funktion aufrufen und binden Sie die Funktion " foo " direkt zu den click-handler:

function foo(){
    if ($('#mycheckbox').is(':checked')){
        $('.myclass').hide();
    } else {
        $('.myclass').show();
    }
}

$(function() {
    foo(); //this is launched on load
    $('#mycheckbox').click(foo)  

});

InformationsquelleAutor Nicola Peluchetti

1

Ich weiß, diese Frage wurde beantwortet vor, aber das ist eine andere nette Art und Weise zu vollbringen OP ' s problem, vor allem mit den Checkboxen im Sinn, als Auslösung ein click-Ereignis auf ein element bewirkt, dass die Kontrollkästchen, um versehentlich aktiviert/deaktiviert:
```
$('#myCheckbox').bind('click init', function() {
    $('.myDiv').toggle($('#myCheckbox').is(':checked'));
}).trigger('init');
```
Diese Methode vermeidet auch die click-events propagieren.

InformationsquelleAutor Edward
0

Das einzige, was Sie tun könnten, wäre, Aufruf von foo() wie folgt:
```
$('#mycheckbox').click(foo);
```
InformationsquelleAutor Seth

Versuchen, diese

$('#mycheckbox').click(function (){
     $(this).is(':checked')?$('.myclass').hide():$('.myclass').show();
}).click();

InformationsquelleAutor ShankarSangoli

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.