javascript - 如何对附加的 div 进行事件委托(delegate)？

Question

大家好，我想附加一个 div，但它有一些 javascript/ajax 调用，那么我如何以 javascript 代码在附加的 div 中工作的方式附加它？目前我有 3 个下拉菜单，类别 > 子类别和问题。调用的工作方式，当选择一个类别时，子类别将显示在该类别下的第二个下拉列表中，当选择一个子类别时，问题将显示在该子类别下的第三个下拉列表中。我希望它也能在附加的 div 中工作。我该怎么做？因为目前它只是用我当前的附加代码复制我的 div。

new1.php

    <?php
        $con = mysqli_connect("localhost","root","","imetrics") or die ("Cannot connect to the database!");

        ?>

            <form name="form1" action="" method="post">

                <div id="sform" class="tab-pane fade">

               <br>

               <div class="col-md-12">
                   <div class="col-md-10" id="sections">
                       <div class="panel-group">
                           <div class="panel panel-default">
                               <div class="panel-heading">Section 1</div>
                               <div class="panel-body">


                                   <b>Number of Questions: </b>


                                   <span id="ctr_num"> <input id="q_num" class="form-control" style="width:50px;" name="q_num" size="2" placeholder="#"/></span>
                                   <br/>


                                   <b>Select Category</b>


                                   <select class="form-control" style="width: 150px;" id="categorydd" name="catdd" onChange="change_category()">

                                       <option>-Please Select One-</option>

                                       <?php
                                       $query=mysqli_query($con, "SELECT category_id, categoryname FROM category WHERE ParentCategoryID IS NULL");
                                       while($row=mysqli_fetch_array($query)) {
                                           ?>
                                           <option value="<?php echo $row["category_id"]; ?>"><?php echo $row["categoryname"]; ?></option>

                                           <?php
                                       }
                                       ?>

                                   </select>
                                   <br/>
                                   <b>Select Subcategory</b>

                                   <div id="subcategory">

                                       <select class="form-control" style="width: 150px;">

                                           <option>-Please Select One-</option>
                                       </select>
                                       <br/>
                                   </div>
                                   <p hidden>Select Questions</p>

                                   <br/>

                                   <div id="question">

                                   </div>      <br/>

                               </div>
                           </div>
                       </div>
                   </div>
               </div>
           </div>
           <hr>
       <div class="col-md-2">
       <input type="submit" name="addsection" class="btn btn-default" value="Add Section" id="addsection" />

       </div>





            </form>

<script type="text/javascript">
  function change_category()
{
    var xmlhttp=new XMLHttpRequest();
    xmlhttp.open("GET","ajax.php?category="+document.getElementById("categorydd").value,false);
    xmlhttp.send(null);
    document.getElementById("subcategory").innerHTML=xmlhttp.responseText;


    if(document.getElementById("categorydd").value=="Select")
    {
    document.getElementById("question").innerHTML="<select><option>Select</option></select>";
    }

    //alert(document.getElementById("categorydd").value);
    var xmlhttp=new XMLHttpRequest();
    xmlhttp.open("GET","ajax.php?main=1&subcategory="+document.getElementById("categorydd").value +"&cnt="+document.getElementById("q_num").value,false);
    xmlhttp.send(null);
    document.getElementById("question").innerHTML=xmlhttp.responseText;
}


function load_questions(){

    var xmlhttp=new XMLHttpRequest();
    xmlhttp.open("GET","ajax.php??main=1&subcategory="+document.getElementById("subcategorydd").value +"&cnt="+document.getElementById("q_num").value,false);
    xmlhttp.send(null);
    document.getElementById("question").innerHTML=xmlhttp.responseText;


}
    $(document).ready(function(){
        var ctr = 0;
        $("#addsection").click(function(){
            var section = document.getElementById("sections").innerHTML;
            $("#sections").append(section);


            ctr++;


        });

    });




</script>

new2.php

    <?php
    $con = mysqli_connect("localhost","root","","imetrics") or die ("Cannot connect to the database!");

    $category= isset($_GET["category"])?$_GET["category"]:"";
    $subcat=isset($_GET["subcategory"])?$_GET["subcategory"]:"";
    $question=isset($_GET["subcategory"])?$_GET["subcategory"]:"";

    if($category!=""){

    $query=mysqli_query($con, "SELECT category_id, categoryname FROM category WHERE ParentCategoryID =$category ");
    echo "<select id='subcategorydd' class='form-control' style='width:150px;' name='subcatdd' onchange='load_questions()' >";
    echo "<option selected>"; echo "Select"; echo "</option>";
    while($row=mysqli_fetch_array($query))
    {
        echo "<option value='$row[category_id]'>"; echo $row["categoryname"]; echo "</option>";
    }
    echo "</select>";
}

// for loading ques under Category already
if($question !="" && $cnt!="" && $addQues!="yes" && $main == 1){
    $i = 0;
    for( $i = 1; $i <= $cnt; $i++ ){
        $query=mysqli_query($con, "SELECT question.* FROM question LEFT JOIN category AS subcategory on subcategory.category_id = question.question_subcat WHERE question.question_category = $question AND (question.question_subcat IS NULL OR subcategory.category_id IS NOT NULL)");


        echo "<form id='ques{$i}'>
        <b id='labelquestion_dropdown{$i}'>Question #{$i}</b>
        <select id='question_dropdown{$i}' class='form-control' onchange=\"showUser( this.value, 'txtHint{$i}' )\" style='width: 300px;' name='question_dropdowns{$i}'>
            <option selected>Select";

        while($row=mysqli_fetch_array($query)){
            echo "<option value='{$row['question_id']}'>" . $row["questiontitle"];
        }

        echo "
        </select>

    <div id='txtHint{$i}'><b>Person info will be listed here...</b></div>
    <br /></form>";
    }
    echo "<div id='insertQuesHere".$i."'></div>";

    echo "<a href='#add_question' onclick='return addQues_Cat();'>Add Question</a> | ";
    echo "<a href='#del_question' onclick='return delQues();'>Delete Question</a>";
}

// for loading ques under SUBCATEGORY
if($question !="" && $cnt!="" && $addQues!="yes" && $main != 1){
    $i = 0;
    for ($i = 1; $i <= $cnt; $i++)
    {
        $query=mysqli_query($con, "SELECT * FROM question WHERE question_subcat = $question ");
        echo "
    <form id='ques{$i}'>
        <b id='labelquestion_dropdown{$i}'>Question #{$i}</b>
        <select id='question_dropdown{$i}' class='form-control' onchange=\"showUser( this.value, 'txtHint{$i}' )\" style='width: 300px;' name='question_dropdowns{$i}'>
     <option selected>Select";
        while($row=mysqli_fetch_array($query))
        {
            echo "<option value='{$row['question_id']}'>" . $row["questiontitle"];
        }

        echo "
        </select>

    <div id='txtHint{$i}'><b>Person info will be listed here...</b></div>
    </form>  
    <br />";
    }

    echo "<div id='insertQuesHere".$i."'></div>     ";

    echo "<a href='#add_question' onclick='return addQues();'>Add Question</a> | ";
    echo "<a href='#del_question' onclick='return delQues();'>Delete Question</a>";
}

    ?>

Answer 1

在 ajax 调用之后

function change_category()
    {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET","new2.php?category="+document.getElementById("categorydd").value, false);
        xmlhttp.send(null);
        document.getElementById("subcategory").innerHTML = xmlhttp.responseText;

        if(document.getElementById("categorydd").value=="Select"){
            document.getElementById("question").innerHTML="<select><option>Select</option></select>";
        }
    }

只需像这里一样再次绑定(bind)事件

    $(document).ready(function(){
        var ctr = 0;
        $("#addsection").click(function(){
            var section = document.getElementById("sections").innerHTML;
            $("#sections").append(section);


            ctr++;


        });

    });

您的 change_category 函数变为

function change_category()
    {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET","new2.php?category="+document.getElementById("categorydd").value, false);
        xmlhttp.send(null);
        document.getElementById("subcategory").innerHTML = xmlhttp.responseText;

        if(document.getElementById("categorydd").value=="Select"){
            document.getElementById("question").innerHTML="<select><option>Select</option></select>";
        }

        $("#addsection").click(function(){
            var section = document.getElementById("sections").innerHTML;
            $("#sections").append(section);
        });
    }