Ich habe also einen einfachen JQuery-Code:

$(function () {
  var podatoci;
  var i;

  $(".front").on("load", init());
  $("#remove").on("click", toggleRemove());

  function init() {
    load();
  }

  function load() {
    $.get("data.json", function (data, status) {
      podatoci = data;
      fill();
    })
  }

  function toggleRemove() {
    console.log("Yes");
    $(".likse-dislikes").toggle();
  }

  function fill() {
    for (i = 0; i < podatoci.length; i++) {
      $("#container").append("<div class='wrap'><img class='img' src='"+podatoci[i].url+"'/><div class='likes-dislikes'><img class='like' src='sources/like.png'/><img class='dislike' src='sources/dislike.png'/></div></div>");
    }
  }
});

Wenn ich auf die Schaltfläche mit der ID remove klicke, wird die Funktion toggleRemove() ausgeführt.

Wenn ich jedoch die Webseite starte und beim Klicken auf die Schaltfläche zur Konsole komme, wird die Funktion nicht ausgeführt, sondern Console.log("OK") vermutlich nur einmal, wenn die Seite geladen wird. Kann jemand bitte erklären, wo das Problem liegt und wie ich es behebe?

Danke im Voraus!

0
David Mathers 19 Apr. 2018 im 17:25

4 Antworten

Beste Antwort

Dies macht nicht das, was Sie denken:

$("#remove").on("click", toggleRemove());

Dies führt toggleRemove einmal aus, wenn die Seite geladen wird, und setzt den Handler auf das Ergebnis dieser Funktion. (Welches ist undefined, weil die Funktion nichts zurückgibt.)

Sie möchten den Handler auf die Funktion selbst setzen, nicht auf das Ergebnis der Funktion:

$("#remove").on("click", toggleRemove);

Wenn Ihr Element der Seite hinzugefügt wird, nachdem dieser Code ausgeführt wurde (wir wissen es nicht, obwohl der angezeigte Code das Hinzufügen einiger dynamischer Elemente impliziert), müssen Sie das Ereignis delegieren:

$(document).on("click", "#remove", toggleRemove);
2
David 19 Apr. 2018 im 14:29

Sie könnten $scope.apply(handler) verwenden

$scope.apply(function () {
    // Angular is now aware that something might of changed
    $scope.changeThisForMe = true;
});
-3
Octavian Guzu 19 Apr. 2018 im 14:26

Wie ich hier sehen kann $(".front").on("load", init()); $("#remove").on("click", toggleRemove()); rufen Sie Ihren Anruf rechtzeitig zurück, wenn Sie den Ereignis-Listener registrieren. Versuchen Sie Folgendes: $(".front").on("load", init); $("#remove").on("click", toggleRemove);

0
Kasabucki Alexandr 19 Apr. 2018 im 14:28

Sie haben den Klassennamen in Ihrer Entfernungsfunktion falsch geschrieben.

$ (". likse -abneigungen"). toggle ();

Ändern Sie es zu

$(".likes-dislikes").toggle();
0
Antonio Neto 19 Apr. 2018 im 14:28