Jquery中动态添加元素的绑定事件不起作用

Question

I have added Address,city and locality using jQuery in a dynamic added div element where the binding event is not working as expected: I have below jquery code:

<script type="text/javascript">
    $(document).ready(function () {
        var counter = 0;
        $(document).on('click', '#addButton', function (e) {
            if (counter > 19) {
                alert("Only 20 Address allowed");
                return false;
            }
            e.preventDefault();

            var elems = '<div class="col-lg-5"  id="Address' + counter + '">' +
                    '<textarea class="form-control" name="alt_address[]" rows="3" placeholder="Address' + (counter + 1) + '"/><div class="col-lg-6 form-group col-lg-offset-6"> </div>' +
                    '<div class="col-lg-3 form-group" id="city' + counter + '">' +
                    '<select name="city_name[]" id="city_name' + counter + '" class="form-control"><option value="" selected ="selected">Select City</option></select>' +
                    '</div><div class="col-lg-3 form-group"><select name="locality_name[]" id="locality_name' + counter + '" class="form-control"><option value="" selected="selected" >Select Locality</option></select></div></div>' +
                    '<div class="col-lg-1 form-group">' +
                    '<button type="button" class="removebtn" id="removeButton' + counter + '">' +
                    '<span class="glyphicon glyphicon-minus"></span></button>' +
                    '</div><div class="col-lg-6 form-group col-lg-offset-6"> </div>';

            //('#addressDiv').append(elems);
            $('#addressDiv').append(elems);


            $.ajax({
                type: "Post",
                url: "city_load.php",
                success: function (html) {
                    $('#city_name' + counter).html(html);
                }

            });


            $(document).on('change', '#city_name' + counter, function (ev) {

                ev.preventDefault();
                $city_id = $(this).val();

                $.ajax({
                    type: "Post",
                    url: "ajax-dd3ck.php",
                    data: "city_id=" + $city_id,
                    cache: "false",
                    success: function (html) {

                        $('#locality_name' + counter).html(html);

                    }

                });


            });
            //counter++;
            return false;
        });
        $(document).on('click', '.removebtn', function () {

            if (counter == 0)
            {
                alert("No more textbox to remove");
                return false;
            }

            counter--;

            $("#Address" + counter).remove();
            $("#removeButton" + counter).remove();

        });

    });
</script>

My PHP Code for adding city in dropdown

city_load.php:

<?php

include("db.php");
$sql = "select * from city";
echo "<select name='city_name[]' id='city' class='city1'><option value='' selected ='selected'>Select City</option>";
$res = mysqli_query($con, $sql);
while ($row = mysqli_fetch_array($res)) {

    echo "<option value='$row[city_id]'>$row[city_name]</option>";
}
echo "</select>";
?>

locality_load.php

<?php

include("db.php");
$city_id = $_POST['city_id'];

$sql = "select locality_id,locality_name,city_id from locality where city_id=$city_id";

$res = mysqli_query($con, $sql);
$result = mysqli_query($con, $sql) or die("query error");
while ($rows = mysqli_fetch_array($result)) {



    $locality_id = $rows['locality_id'];

    $locality_name = $rows['locality_name'];

    echo "<option value=" . $locality_id . ">" . $locality_name . "</option>";

    //echo '<option value="'.$locality_id.'">'.$locality_name.'</option>';
}
?>

The issue I am getting is that the first dynamic div is getting added and data is loading properly but for 2nd dynamic div it is not working. Please have a look on screenshot:

Answer 1

$(document).ready(function () {
var counter = 0;
$(document).on('click', '#addButton', function (e) {
    if (counter > 19) {
        alert("Only 20 Address allowed");
        return false;
    }
    e.preventDefault();

    var $elems = $('<div class="col-lg-5"  id="Address' + counter + '">' +
            '<textarea class="form-control" name="alt_address[]" rows="3" placeholder="Address' + (counter + 1) + '"/><div class="col-lg-6 form-group col-lg-offset-6"> </div>' +
            '<div class="col-lg-3 form-group" id="city' + counter + '">' +
            '<select name="city_name[]" id="city_name' + counter + '" data-index="' + counter + '" class="form-control"><option value="" selected ="selected">Select City</option></select>' +
            '</div><div class="col-lg-3 form-group"><select name="locality_name[]" id="locality_name' + counter + '" class="form-control"><option value="" selected="selected" >Select Locality</option></select></div></div>' +
            '<div class="col-lg-1 form-group">' +
            '<button type="button" class="removebtn" id="removeButton' + counter + '">' +
            '<span class="glyphicon glyphicon-minus"></span></button>' +
            '</div><div class="col-lg-6 form-group col-lg-offset-6"> </div>');

    //('#addressDiv').append(elems);
    $('#addressDiv').append($elems);

    $.ajax({
        type: "Post",
        url: "city_load.php",
        success: function (html) {
            $elelms.find('select').html(html);
        }

    });

    counter++;
    return false;
});
$(document).on('change', 'select', function (ev) {
    var cc = $(this).attr('data-index');
    ev.preventDefault();
    $city_id = $(this).val();

    $.ajax({
        type: "Post",
        url: "ajax-dd3ck.php",
        data: "city_id=" + $city_id,
        cache: "false",
        success: function (html) {
            $('#locality_name' + cc).html(html);
        }
    });
});
$(document).on('click', '.removebtn', function () {

    if (counter == 0)
    {
        alert("No more textbox to remove");
        return false;
    }

    counter--;

    $("#Address" + counter).remove();
    $("#removeButton" + counter).remove();

});

});

There are maybe some problem!