2015-11-06 91 views
0

我已經在動態使用jQuery加入其中結合事件不工作按預期div元素加入Addresscitylocality: 我有下面的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動它不工作。 請對截圖看看:

https://snag.gy/CBXvz.jpg

+0

你的代碼哪部分不工作? – Rayon

+0

你有沒有在控制檯中看到任何錯誤? –

回答

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

}); 

});

有可能是一些問題!

+0

當我使用counter ++時,計數器在下拉菜單的click事件中發生變化,並且數據不會到達。有沒有其他方法可以使用不同ID的方式動態創建div,而無需計數器? – ByohBaraat

+0

在ajax回調中,你不能使用counter.U可以寫這樣的東西,var $ dom = $('#addressDiv')。append(elems);在ajax回調中,使用$ dom.find('select')。 HTML(HTML)。 –

+0

我試了一下。現在請看下面更新後的代碼: – ByohBaraat

0

計數器值保存爲數據-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的創建。 (代碼未經測試)

+0

您可以在分配counter_id後告訴我線,我如何在我的代碼中使用它。 – ByohBaraat

+0

address = $(「。Address [data-id = counter_id]」);通過使用此方法,您可以使用counter_id選取每個關聯的數據。 –

+0

:while apply counter_id = $(this).attr('data-id');在$ dom = $('#addressDiv')行後面指定時,此值未定義。append(elems); – ByohBaraat