动态绑定事件加入Jquery的元件不工作

我已经在动态使用jQuery加入其中结合事件不工作按预期div元素加入Address，city和locality：我有下面的jquery代码：动态绑定事件加入Jquery的元件不工作

<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>

我的PHP代码在下拉

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>'; 
} 
?>

我得到的问题是，第一动态DIV是越来越增加和数据加载正确但第二次DIV动它不工作。请对截图看看：

来源

2015-11-06 ByohBaraat

你的代码哪部分不工作？ – Rayon

你有没有在控制台中看到任何错误？ –

$(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(); 

});

}）;

有可能是一些问题！

来源

2015-11-06 05:41:31

当我使用counter ++时，计数器在下拉菜单的click事件中发生变化，并且数据不会到达。有没有其他方法可以使用不同ID的方式动态创建div，而无需计数器？ – ByohBaraat

在ajax回调中，你不能使用counter.U可以写这样的东西，var $ dom = $（'＃addressDiv'）。append（elems）;在ajax回调中，使用$ dom.find（'select'）。 HTML（HTML）。 –

我试了一下。现在请看下面更新后的代码： – ByohBaraat

计数器值保存为数据-ATTR 例如

var elems = '<div class="col-lg-5 Address" data-id="' + 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 city" data-id="' + counter + '">' + 
       '<select name="city_name[]" data-id="' + counter + '" class="form-control city_name"><option value="" selected ="selected">Select City</option></select>' + 
       '</div><div class="col-lg-3 form-group"><select name="locality_name[]" data-id="' + counter + '" class="form-control locality_name"><option value="" selected="selected" >Select Locality</option></select></div></div>' + 
       '<div class="col-lg-1 form-group">' + 
       '<button type="button" class="removebtn" data-id="' + counter + '">' + 
       '<span class="glyphicon glyphicon-minus"></span></button>' + 
       '</div><div class="col-lg-6 form-group col-lg-offset-6"> </div>';

使用的每个元素的一类，类上结合事件。像

$(document).on('change','.city_name', function (ev) { 
    counter_id = $(this).attr('data-id'); 
}

所以你会得到计数器的值，并希望它会工作，每div的创建。（代码未经测试）

来源

2015-11-06 07:13:16

您可以在分配counter_id后告诉我线，我如何在我的代码中使用它。 – ByohBaraat

address = $（“。Address [data-id = counter_id]”）;通过使用此方法，您可以使用counter_id选取每个关联的数据。 –

：while apply counter_id = $（this）.attr（'data-id'）;在$ dom = $（'＃addressDiv'）行后面指定时，此值未定义。append（elems）; – ByohBaraat

动态绑定事件加入Jquery的元件不工作

回答

相关问题