javascript - 如何通过从 javascript 函数的 <td> 调用 jquery 函数来基于类别加载子类别以动态添加行？

Question

当我单击添加行按钮时，类别下拉列表加载成功，但是当我从此类别列表中选择一个选项时，子类别不加载任何列表。

动态添加行的Javascript函数:

<script type="text/javascript">
    $(document).ready(function(){
        var i=1;
        $("#add_row").click(function(){
            $('#addr'+i).html("<td>"+ (i+1) +"</td>   <td><select name='parent_catt"+i+"' id='parent_catt' class='form-control input-md'><?php while($row2 = $query2_parent->fetch_array()): ?><option value='<?php echo $row2["cat_id"]; ?>'><?php echo $row2["category"]; ?></option><?php endwhile; ?></select></td><td><select name='sub_catt"+i+"' id='sub_catt' class='form-control input-md'></select></td><td><input  name='mobile"+i+"' type='text' placeholder='Mobile'  class='form-control input-md'></td><td><input  name='mobile"+i+"' type='text' placeholder='Mobile'  class='form-control input-md'></td><td><input  name='mobile"+i+"' type='text' placeholder='Mobile'  class='form-control input-md'></td>");

            $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
            i++; 
        });

        $("#delete_row").click(function(){
            if(i>1){
                $("#addr"+(i-1)).html('');
                i--;
            }
        });

    });                     
</script>

加载子类别的 jQuery 函数:

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

    $("#parent_catt").click(function() {
        alert("clicked");
        $(this).after('<div id="loader"><img src="images/loading.gif" alt="loading subcategory" /></div>');
        $.get('loadsubcat.php?parent_catt=' + $(this).val(), function(data) {
            $('#sub_catt').html(data);
            $('#loader').slideUp(200, function() {
                $(this).remove();
            });
        }); 
    });

});
</script>

获取详细信息的 PHP 代码:

<?php 
include('dbconnect.php');


$parent_catt = $_GET['parent_catt'];

$query2 = $con->query("SELECT * FROM subcategory WHERE cat_id = '$parent_catt'");
while($row2 = $query2->fetch_array()) {
    echo "<option value='$row2[subcat_id]'>$row2[subcategory]</option>";
}
?>

Answer 1

替换这一行

$("#parent_catt").click(function() {

由此

$(document).off("click", "#parent_catt").on("click", "#parent_catt", function(){