0

I have a problem with jQuery load() and html forms. After loading a div from a php. file into a div, the form doesn't work anymore:

jquery:

<script>
  $(document).ready(function (){
    $("#buttest").click(function (){
      $("#ajax").load("Vokabeltrainer_sec.php?Lektion=<?php echo $lection ?> #area");
    });
  });
</script>

HTML-Form:

<?php
    echo '<form action="Ergebnis.php" method="post">';
    generateRadio($translation, $firstWord, $i, $index, $lection);
    echo '<form>';
?>

The .php function is generating radio buttons. Before reloading the div evrything works fine! Of course there is also a submit-botton:

<button type="submit" name="submit" value="Submit" id="subbut" class="btn btn-default">weiter</button>

Sorry for my bad english!

EDIT:

<div id="ajax">
    <div class="col-md-6">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Übersetzung auswählen</h3>
            </div>
            <div class="panel-body">
                <?php
                echo '<form action="Ergebnis.php" method="post">';
                generateRadio($translation, $firstWord, $i, $index, $lection);
                echo '<form>';
                ?>
            </div>
        </div>
        <br>
        <button type="submit" name="submit" value="Submit" id="subbut" class="btn btn-default">weiter</button>
        <div id="test">
            <button type="button" id="buttest">TEST</button>
        </div>
    </div>
</div>

The div with id="ajax" should be reloaded whith nearly the same div but with a different php function.

Douwe de Haan
  • 6,247
  • 1
  • 30
  • 45
frankvanlampe
  • 23
  • 4
  • This is a too less code to give you a proper answer. But I guess, you just reload a div which has no event set anymore. You have to reset the event on the newly reloaded html-element. – Oliver Jun 14 '17 at 10:28
  • I just want to replace the div "ajax" and replace it with the same one but with a different php function. I didn't write html before so it's hard for me to understand what you're meaning. How can I reset the html element? Thanks for answering! – frankvanlampe Jun 14 '17 at 10:43
  • When you wire up events (*eg* `$("#buttest").click(function (){`) it only affects elements that exist when the code is called. If you add an element later, any previously wired up events will no longer work. Using `$.load` will delete existing events and replace/add them with new ones - so any events within the form will no longer work. The actual parts of the form that "no longer work" have not been included in the question, so we can't be more specific. Look here for more info: https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements – freedomn-m Jun 14 '17 at 10:58
  • Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) – freedomn-m Jun 14 '17 at 10:59
  • It's just the submit-Button (shown in my edit) witch dosn't work after reload. Bevore reload, after clicking the button evrything works fine and i'm getting to the next page Ergebnis.php wich is defined in the form. – frankvanlampe Jun 14 '17 at 11:35

0 Answers0