0

ボタンmagic1またはをクリックするmagic2と、divmyboxがテキスト、ボタン ID、およびボタンで更新されます ( と では異なりますmagic1) magic2。

新しく生成されたボタンをクリックすると、新しく生成されたボタンのボタン ID がboxdiv に表示されます。新しく生成されたボタンをクリックすると、boxdiv が更新されません。これがコードです。

jquerycode.php が初期ファイルです。magic1ボタンまたはをクリックするmagic2と、Ajax はページ session.php を呼び出します。

jquerycode.php ファイル

<!doctype html>
<?php
$first=$_POST['q'];
echo $first;
?>
<html>
    <head>
        <meta charset="utf-8" />
        <title>My jQuery Ajax test</title>
        <style type="text/css">
            #mybox {
                width: 300px;
                height: 250px;
                border: 1px solid #999;
            }

            #box {
                width: 300px;
                height: 250px;
                border: 1px solid #999;
                position: absolute;
                right:210px;
            }
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script>                  

            $(document).ready(function(){ 

    $(".magic_button").click(function() {
        var data = $(this).attr('id');
        //alert (data);
        $.ajax({
            type: "POST",
            url: "session.php",
            data: { 'id': data }
        }).done(function(msg) {
                        $("#mybox").html(msg);          
                    });
    });
});

        </script>
        <script>

        $(".fir").click(function() {
        var dataa = $(this).attr('id');
        alert ("hello");
        $.ajax({
            type: "POST",
            url: "jquerycode.php",
            data: { 'q': dataa }
        }).done(function(msg) {
                        $("#box").html(msg); 
                        return false;
        });
        });

        </script>
    </head>
    <body>
        The following div will be updated after the call:<br />
        <div id="mybox">

        </div>

         <div id="box">

        </div>

        <form name="magic">
   <!-- <label for="name" id="name_label">Name</label>  
    <input type="text" name="name" id="name" size="30" value="" class="text-input" />  
    <label class="error" for="name" id="name_error">This field is required.</label> -->
    <input type="button" class="magic_button" name="magic_button" id="magic_button_1" value="magic1" />
    <input type="button" class="magic_button" name="magic_button" id="magic_button_2" value="magic2" />
</form>

    </body>
</html>

session.php ファイル

 <?php
   $id = $_POST['id'];
$id = ucwords(implode(' ',explode('_',$id)));
if($id==="Magic Button 2")
{
    echo "hey its button 2!!";
    ?>

    <input type="button" name="butb" id="second" class="fir" value="second"/>
    <?php
}
else
{
    echo "hey its button 1!!";

    ?>
    <input type="button" name="buta" id="first" class="fir" value="First"/>

    <?php
}
echo $id;
    ?>
4

1 に答える 1

0

動的に生成された要素に JQuery Live()を使用できる場合に最適です。

$("a.offsite").live("click", function(){ alert("Goodbye!"); });                // jQuery 1.3+

JQuery Live() は非推奨であるため、JQuery on()を使用する必要があります 

$("#elementid").on("click", function(event){
alert($(this).text());
});
于 2013-05-04T06:41:02.617 に答える