Question

我有一个php表单，在用户单击选择框后执行一系列AJAX请求。我试图找到一种方法，使用一个按钮复制这一系列的选择框与相关的AJAX功能。

此表单有一个选择框，用户可以在其中选择国家/地区。然后发送一个ajax请求，创建一个选择框，用户可以在该选择框中选择该国家/地区的区域，并发送一个ajax请求，创建一个选择框，用户可以在该区域中选择该区域，并发送最终的ajax请求，创建一个选择用户可以在该县选择城市的框。该部分使用以下代码。

<?php <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
//Connect to Database require 'connections_pdo.php'; $country = $conn->prepare("SELECT DISTINCT country FROM country ORDER BY country ASC"); $country->execute(array( 'country' )); $country->setFetchMode(PDO::FETCH_ASSOC); echo "
<html>

<head>
  <script src='jquery-ui-1.10.2.custom/js/jquery-1.9.1.js'></script>
  <script src='jquery-ui-1.10.2.custom/js/jquery-ui-1.10.2.custom.js'></script>
  <script src='select_area.js?date=" . $date . "'></script>
</head>"; //Form To Select Geographic Area echo "

<body>
  <form name='input' id='input' action='article_insert_2.php' enctype='multipart/form-data' method='post'>"; //Geographic Area echo "
    <table>
      <tr>
        <th>
          <div id='country'>Country
            <br />
            <select class='country' name='country[]' id='country_1'>
              <option value=''></option>"; $i = 0; while ($row = $country->fetch()) { if ($i == 0) { $countries = array(); } else { } array_push($countries, $row['country']); $i++; } foreach ($countries as $d) { echo "
              <option value='" . $d . "'>" . $d . "</option>"; } echo "</select>
            <br/>
          </div>
          <button id='add_country'>Add Country</button>
        </th>
        <th>
          <div id='region'></div>
        </th>
        <th>
          <div id='prefecture'></div>
        </th>
        <th>
          <div id='sub_prefecture'></div>
        </th>
        <th>
          <div id='city'></div>
        </th>
      </tr>
    </table>"; //Submit echo "
    <input type='submit' value='Submit'>
  </form>"; ?>

这是创建选择框所需的带有AJAX代码的Javascript。

$(document).ready(function() {

  //AJAX request on Country select box appends a Region select box
  //then an AJAX request on Region select box brings appends a Prefecture select box
  //then an AJAX request on Prefecture select box appends a City Select Box
  $('.country').on("change", function() {
    var ids = this.id.split("_");
    var id = ids[1];
    var country = $("#country_" + id).val();
    $.ajax({
      url: 'region.php?t=' + Math.random(),
      type: "POST",
      data: {
        country: country,
        id: id
      },
      success: function(result) {
        $("#region").append(result);
        $(document).ready(function() {
          $('.region').on("change", function() {
            var ids = this.id.split("_");
            var id = ids[1];
            var country = $("#country_" + id).val();
            var region = $("#region_" + id).val();
            $.ajax({
              url: 'prefectures.php?t=' + Math.random(),
              type: "POST",
              data: {
                country: country,
                region: region,
                id: id
              },
              success: function(result) {
                $("#prefecture").html(result);
                $(document).ready(function() {
                  $('#prefecture_1').on("change", function() {
                    var ids = this.id.split("_");
                    var id = ids[1];
                    var country = $("#country_" + id).val();
                    var region = $("#region_" + id).val();
                    var prefecture = $("#prefecture_" + id).val();
                    $.ajax({
                      url: 'cities.php?t=' + Math.random(),
                      type: "POST",
                      data: {
                        country: country,
                        region: region,
                        prefecture: prefecture,
                        id: id
                      },
                      success: function(result) {
                        $("#city").html(result);
                      }
                    })
                  })
                })
              }
            })
          })
        })
      }
    })
  })
 
})

但是，我想创建一个具有复制这些选择框的功能的按钮。目前我有以下代码，它将另一个带有类country的选择框附加到我的国家div标签。但是，与具有类国家/地区的选择框的onchange事件关联的AJAX函数不适用于此新选择框。

   //Function to append additional select boxes with all countries to the country Div tag
  var country_id = 2;
  $('#add_country').on("click", function(e) {
    e.preventDefault();
    var options = $('#country_1 option');
    var country_select = "<select class='country' name = 'country[]' id='country_" + country_id + "'>";
    $.map(options, function(option) {
      country_select += "<option value='" + option.value + "'>" + option.value + "</option>";
    })
    country_select += "</select><br />";
    $('#country').append(country_select);
    country_id++;
  })

如果我需要澄清任何内容或添加其他代码，请告知我们。

Answer 1

要使您的事件处理程序适用于在页面加载后添加的元素，您需要使用Event delegation：

$('#country').on("change", ".country", function() {

在从Javascript函数创建的选择框上使用JQuery运行AJAX请求

1 个答案: