Jquery中动态添加元素的绑定事件不起作用 [英] Bind event for dynamic added elements in Jquery not working

问题描述

我在动态添加的div元素中使用jQuery添加了Address，city和locality，其中绑定事件未按预期工作：我有以下jquery代码：

< script type =   text / javascript> 
 $（ document ）。ready（ function （）{
  var  counter =  0 ; 
 $（ document ）。on（' 点击'，' ＃addButton'， function （e）{
  if （counter>  19 ）{
 alert（ 仅允许20个地址）; 
  return   false ; 
} 
 e.preventDefault（）; 
 
  var  elems = ' < div class =col-lg-5id =地址' + counter + ' >  + 
 ' < textarea class =form-controlname =alt_address [] rows =3占位符=地址' +（计数器+  1 ）+ ' />< div class =col-lg-6 form-group col-lg-offset-6> < / div>' + 
 ' < div class =col-lg- 3表格组id =city' + counter + ' > + 
 ' < select name =city_name []id =city_name' + counter + ' class =form-control>< option value =selected =selected> ;选择城市< /选项>< / select>' + 
 ' < / div>< div class =col-lg-3 form-group>< select name =locality_name []id =locality_name' + counter + ' class =form-control>< option value =selected =selected>选择地点< / option>< / select> ;< / div>< / div>' + 
 ' < div class =col-lg-1 form-group>' + 
 ' < button type =buttonclass =removebtnid =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，
成功： function （html）{
 $（'  #city_name' + counter）.html（html）; 
} 
 
}）; 
 
 
 $（ document ）。on（' 更改'，' ＃city_name' + counter，  function （ev）{
 
 ev.preventDefault（）; 
 $ city_id = $（ this ）。val（）; 
 
 $ .ajax（{
 type： 发布，
 url：  ajax-dd3ck.php ，
数据：  city_id = + $ city_id，
 cache：  false，
成功： function （html）{
 
 $（' ＃locality_name' + counter）.html（html）; 
 
} 
 
}）; 
 
 
}）; 
  //   counter ++;  
 返回  false ; 
}）; 
 $（ document ）。on（' 单击， 。removebtn'，函数（）{
 
  if （counter ==  0  ）
 {
 alert（ 不再需要删除文本框）; 
 返回  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'>选择City< / option>; 
  $ res  = mysqli_query（$ con，$ sql）; 
  while （$ row = mysqli_fetch_array（$ res））{
 
  echo   < option value ='$ row [city_id]'> $ row [city_name]< /选项>中; 
} 
  echo   < ; /选择>中; 
 ？>  

locality_load.php

 <？php  
 
 include（< span class =code-string>  db.php）; 
  $ city_id  = $ _POST ['  city_id ]; 
 
  $ sql  =  从locality中选择locality_id，locality_name，city_id，其中city_id = $ city_id; 
 
  $ res  = mysqli_query（$ con，$ sql）; 
  $ result  = mysqli_query（$ con，$ sql）或 die（ 查询错误）; 
  while （$ rows = mysqli_fetch_array（$ result））{
 
 
 
  $ locality_id  = $ rows ['  locality_id']; 
 
  $ locality_name  = $ rows ['  LOCALITY_NAME']; 
 
  echo   <选项值=。  $ locality_id 。  >。  $ locality_name 。  < / option>; 
 
  //   echo'< option value ='。$ locality_id。'> ;'。$ locality_name。'< / option>';  
} 
 ？>  

我得到的问题是第一个动态div正在添加并且数据正确加载，这次我的计数器变量我没有增加否则代码不工作。

对于第二个动态div，它不起作用。请看一下屏幕截图：

http://snag.gy/CBXvz.jpg [< a href =http://snag.gy/CBXvz.jpgtarget =_ blanktitle =New Window> ^ ]

解决方案

（ document ）。ready（ function （）{
var counter = 0 ;

（ document ).on(' 点击'，' ＃addButton'， function （e）{
if （counter> 19 ）{
alert（ 仅允许20个地址）;
return false ;
}
e.preventDefault（）;

var elems = ' < div class =col-lg-5id =Address' + counter + ' >' +
' < textarea class =form-controlname = alt_address []rows =3占位符=地址' +（计数器+ 1 ）+ ' />< div class =col-lg-6 form-group col-lg-offset-6> < / div>' +
' < div class =col-lg- 3表格组id =city' + counter + ' > +
' < select name =city_name []id =city_name' + counter + ' class =form-control>< option value =selected =selected> ;选择城市< /选项>< / select>' +
' < / div>< div class =col-lg-3 form-group>< select name =locality_name []id =locality_name' + counter + ' class =form-control>< option value =selected =selected>选择地点< / option>< / select> ;< / div>< / div>' +
' < div class =col-lg-1 form-group>' +
' < button type =buttonclass =removebtnid =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） ;

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 and this time my counter variable i am not incrementing otherwise code not working.
For 2nd dynamic div it is not working. Please have a look on screenshot:
http://snag.gy/CBXvz.jpg[^]

解决方案

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

这篇关于Jquery中动态添加元素的绑定事件不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！