Ankündigung

Einklappen
Keine Ankündigung bisher.

Click-Event für in JavaScript erstellte HTML-Buttons

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Click-Event für in JavaScript erstellte HTML-Buttons

    Hallo,

    ich bin Anfänger im Bereich der Programmierung mit php und JavaScript und hoffe, dass mir hier jemand bei meinem Problem helfen kann.

    Ich möchte mit JavaScript innerhalb einer Schleife mit variabler Anzahl an Durchläufen ('ge-Bootstrap-te') HTML-Buttons erstellen und jedem dabei eine id (aus einem Array) zuweisen. So weit funktioniert das und sieht zumindest auch schon einmal genauso aus, wie ich es mir vorgestellt habe, aaaaaber:.
    Die so erstellten Buttons reagieren nicht auf ein Click-Event.
    Dazu habe ich in verschiedenen Foren und Einträgen zwar schon einiges gelesen, aber keine richtige Lösung gefunden.

    Mein bisheriger Versuch sieht in Auszügen etwa so aus (ich hoffe Euch erschließt sich zusammen mit den Kommentaren mein Vorhaben):

    PHP-Code:
    <!-- PHP/HTML-BEREICH -->
    <
    div>    
    <!-- 
    HIER STEHEN MEHRERE SELECT-FELDER UND FOLGENDER BUTTON -->
        <
    button id="anzeigenClick">Start</button>
    </
    div>

    <
    p id="test">
    <!-- 
    TAG FÜR DIE BUTTONS -->
    </
    p>

    <!-- 
    JavaScript -->
    <
    script>
    $(
    '#anzeigenClick').click(function () {
    //MITTELS AJAX-REQUEST WIRD ABHÄNGIG VON DER GETROFFENEN AUSWAHL IN DEN SELECT-FELDERN EIN ARRAY (arr) MIT DATEN ERSTELLT;
    //FÜR JEDEN DATENSATZ IM ARRAY SOLL EIN BUTTON ERSTELLT WERDEN, WELCHER ALS ID DIE ID DES DATENSATZES BESITZT:

    var anzahl arr.length;        
    for (var 
    0anzahli++) {

    var 
    addButton "<button data-toggle='button' class='newButton btn btn-default btn-rounded btn-outline btn-sm' type='button' style='color: #03ae01'><i class='fa fa-plus' id='" data[i].id "'></i> BUTTON " + (i+1) + "</button>";

    $(
    '#test').append(addButton);
    }
    });

    // SO WEIT FUNZT DAS. SOBALD ICH ABER VERSUCHE, DIE NEUEN BUTTONS DURCH EIN CLICK-EVENT "ZUM LEBEN ZU ERWECKEN" SO PASSIERT ... GAR NICHTS ...:
    $('.newButton').click(function () {
            
    alert(this.id);
    }
    </script> 
    Hoffentlich kann mir hier jemand weiterhelfen!?
    Bin für jeden Tipp dankbar!

    LG, Stefan


  • #2
    Code:
    var $newButton = $('addButton');
    $newButton.click(function () {
        console.log(this.id);
    });
    $('#test').append($newButton);
    Dein Code ist übrigens grauenhaft zu lesen. Eine Zeile sollte nicht länger als 100 bis 120 Zeichen sein. Im Forum gepostet am besten nicht länger als 80 Zeichen.

    Kommentar


    • #3
      Ich mache das so:

      Code:
      $('body').on('click', '.newbutton', function() {
            alert(this.id);
      });

      Kommentar


      • #4
        Hey Super!!! Ihr habt mir meinen Tag gerettet
        Danke für die schnellen Antworten!!!
        Den Tipp von hellbringer zur Zeilenlänge werde ich mir zu Herzen nehmen, obwohl es in meiner Vorschau eigentlich übersichtlich aussah...

        Kommentar


        • #5
          Zitat von Meister1900 Beitrag anzeigen
          Ich mache das so:

          Code:
          $('body').on('click', '.newbutton', function() {
          alert(this.id);
          });
          this. Der effektivste Weg um mit jQuery onclick events zu machen.

          Kommentar

          Lädt...
          X