Klicken Sie nicht auf Schaltfläche mit ist geladen mit AJAX

Question

Ich lade einen Inhalt in ein Divider #result. In diesem Inhalt gibt es eine Schaltfläche. Nachdem die Contrnt mit Ajax geladen wurde, kann ich nicht auf diese Schaltfläche klicken, ich bekomme keine Warnung. (Die Seite tut es sehen? :))

<script type="text/javascript"> 
$(document).ready(function(e) 
{ 

    $('#printButton').hide(); 

    $('#submitButton').click(function(e) 
    { 
     var kat = $('#kategoria').val(); 
     $.ajax({ 
      type: 'POST', 
      url: 'files/get_arlista_kategoria.php', 
      data: { kat: kat }, 
      dataType: "html", 
      cache: false, 
      beforeSend: function(){ 
       $('#preloaderImage2').show(); 
      }, 
      success: function(data) 
      { 
       var result = $.trim(data); 
       $('#result').html(result); 
       $('#printButton').show(); 
      }, 
      complete: function(){ 
       $('#preloaderImage2').hide(); 
      } 
     }); 
    }); 

    // This click doesnt work 
    $('#savePrices').click(function(e) 
    { 
     alert("Its oké"); 
    }); 

}); 

</script> 

Wie kann ich mit dieser Taste arbeiten und die Eingabe nach der Ajax-er geladen? Ich möchte die Produktpreise aktualisieren.

Und hier ist die PHP-Datei, dies erzeugt den HTML-Inhalt:

<?php 
include_once("../../files/connect.php"); 
include_once("../../files/functions.php"); 
if(!empty($_POST)) 
{ 
    $kategoria = mysqli_real_escape_string($kapcs, $_POST['kat']); 

    $sql = "SELECT termek_id, termek_nev, termek_akcio, termek_normal_ar, termek_akcios_ar, mertekegyseg_nev FROM termek 
      LEFT JOIN webshop_mertekegyseg ON webshop_mertekegyseg.mertekegyseg_id = termek.termek_egyseg 

      WHERE 

      termek_id IN (SELECT kat_kapcs_termek_id FROM `termek_katgoria_kapcsolo` WHERE kat_kapcs_kategoria_id IN ($kategoria)) ORDER BY termek_nev ASC"; 



    $get = mysqli_query($kapcs, $sql) or die(mysqli_error($kapcs)); 
    $num = mysqli_num_rows($get); 
    if($num > 0) 
    { 
     echo '<form method="post">'; 
     echo '<table class="form manufacturer-seo-form table table-hover">'; 
     echo '<thead style="font-weight:bold;"> 
        <tr> 
        <td style="text-align: left;">ID</td> 
        <td class="left">Megnevezés</td> 
        <td style="text-align: left;">Egység</td> 
        <td>Bruttó ár</td> 
        <td>Akciós ár</td> 
        <td style="text-align: center;">Akciós</td> 

        </tr> 
       </thead>'; 
     echo '<tbody>'; 
     while($i = mysqli_fetch_assoc($get)) 
     { 
      ?> 
       <tr id="sor<?php echo html($i['termek_id']); ?>"> 
        <td style="text-align: left;"><?php echo html($i['termek_id']); ?></td> 
        <td class="left"><a title="Megnyitás" style="color:#333;" target="_blank" href="termek-szerkesztes.php?id=<?php echo html($i['termek_id']); ?>"><?php echo html($i['termek_nev']); ?></a></td> 
        <td style="text-align: left;"><?php echo $i["mertekegyseg_nev"] ?></td> 
        <td><input type="text" name="normal_ar" value="<?php echo html($i['termek_normal_ar']); ?>" /></td> 
        <td><input type="text" name="akcios_ar" value="<?php echo html($i['termek_akcios_ar']); ?>" /></td> 
        <td style="text-align: center;"> 
         <select name="termek_akcio" class="input input-select" style="padding:5px 10px"> 
          <?php 
          $ertek = intval($i['termek_akcio']); 
          $values = array("1" => "Igen", "0" => "Nem"); 
          foreach($values AS $k => $v) 
          { 
           $selected = $ertek == $k ? ' selected="selected"':''; 
           echo '<option ' . $selected . ' value="' . $k . '">' . $v . '</option>'; 
          } 
          ?> 
         </select> 
        </td> 
        </tr> 
      <?php 
     } 
     echo '</tbody>'; 
     echo '</table>'; 
     echo '<div class="text-center"><button class="btn saveButton" type="button" id="savePrices">Módosítások mentése</button></div>'; 
     echo '</form>'; 
    } 
    else 
    { 
     echo '<span style="display:block;margin:20px 0 20px 5px;"><b>A kiválasztott kategóriában nincsenek termékek.</b></span>'; 
    } 
} 
?> 

Answer 1

Sie die Click-Ereignis Funktion zuweisen, bevor das Element (Schaltfläche) tatsächlich vorhanden ist. Daher gibt es kein Element, an das das click-Ereignis gebunden werden kann. Sie können das Click-Ereignis auf das Dokument binden statt:

$(document).on('click', '#savePrices', function(e) { 
    alert(...); 
}); 

Völlig ungetestet obwohl ...

Answer 2

Die Onclick Zuordnung ($('#savePrices').click(...)) einmal ausgeführt werden, wenn die Webseite geladen. Aber Ihre Preisschaltflächen sind noch nicht da.

Run wieder es, wenn das AJAX .success ausgeführt:

<script type="text/javascript"> 
$(document).ready(function(e) 
{ 

    $('#printButton').hide(); 

    $('#submitButton').click(function(e) 
    { 
     var kat = $('#kategoria').val(); 
     $.ajax({ 
      type: 'POST', 
      url: 'files/get_arlista_kategoria.php', 
      data: { kat: kat }, 
      dataType: "html", 
      cache: false, 
      beforeSend: function(){ 
       $('#preloaderImage2').show(); 
      }, 
      success: function(data) 
      { 
       var result = $.trim(data); 
       $('#result').html(result); 

       // assign onclick 
       $('#savePrices').click(function(e) 
       { 
        alert("Its oké"); 
       }); 

       $('#printButton').show(); 
      }, 
      complete: function(){ 
       $('#preloaderImage2').hide(); 
      } 
     }); 
    }); 

}); 

</script>