Update <div> onclick with dynamic content in the same <div>

Question

I'm working on a Editor-Menu in administration for a website.The Editor-Menu should load in the div #ausgabe when I open admin.php.($('#ausgabe').load('./admin-ajax/ajax2.php')) That works!

<!DOCTYPE html>
<html>
<head>
<title>admin.php</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?PHP 
echo "<script type='text/javascript' src='http://" . $_SERVER['HTTP_HOST']. "/includes/jquery/jquery-2.1.3.min.js'></script>";

<script type="text/javascript">
    $(document).ready(function() {
            $('a').click(function(){
            var id = $(this).prop('id');
            var action = $(this).prop('name');
            var value = $(this).prop('value');
            $('#ausgabe').load('./admin-ajax/ajax2.php?id=' + id+'&action=' + action+'&value=' + value)  // http://entwickler-forum.de/showthread.php/73216-Tags-quot-laden-quot
        });
        $('#ausgabe').load('./admin-ajax/ajax2.php') // Grundgerüst für Editormenü mit den Artikeln der User
    });
</script>
echo "</head>";

// Testlink in admin.php -works-
    echo "<td class='aktivitaet'><a href='#' id='3333' name='del' value='0'>test 1</href></td>";

// Dynamic Content output through ajax2.php
    echo "<div id='ausgabe'> </div>";

The script should also load specific data from the database. The varables (id, name) come from the link.That also works!

 $('a').click(function(){
        var id = $(this).prop('id');
        var action = $(this).prop('name');
        var value = $(this).prop('value');
        $('#ausgabe').load('./admin-ajax/ajax2.php?id=' + id+'&action=' + action+'&value=' + value)  
    });

The dynamic output gets generated in ajax2.php.(I shortend the script.So there ist only one Testlink.) And this testlink "test 2" does not work. I think the variables (id, name) don`t get into ajax2.php. Is it right?

<?PHP 
//ajax2.php
    echo "<td class='aktivitaet'><a href='#' id='77777' name='del' value='0'>test 2</href></td>";

   $id = $_GET["id"]; 
   $action = $_GET["action"]; 
   $value = $_GET["value"];

   switch ($action) {
        case ('del'):
        echo "Date should get deleted. ID: ".$id." - " .$action . " - " . $value . " <br>";
        include ($_SERVER['DOCUMENT_ROOT'] . '/admin/admin-ajax/case_del.inc.php');
        break;

    } 
?>

Is there any solution to update a <div> with link in the dynamically generated content?
Till now I found nothing. Perhaps I am on wrong path?

Answer 1

I am confused by your question but I think the problem is that you are not using event delegation. You are binding to the a tags that are currently in the DOM. When you load new HTML, any new a tags will not have that click handler bound.

Try delegating the event binding with something like:

$("body").on( "click", "a", function() {
   var id = $(this).prop('id');
   // ...
});

Update <div> onclick with dynamic content in the same <div>

Question

1 answers

solution1
0 ACCPTED 2016-01-03 12:51:27

Update <div> onclick with dynamic content in the same <div>

Question

1 answers

solution1 0 ACCPTED 2016-01-03 12:51:27

solution1
0 ACCPTED 2016-01-03 12:51:27