javascript - jQuery on change 不触发选择

问题描述

我正在使用一个选择下拉列表（位置：状态），我在 ajax 对象的响应中附加了一些选项。

现在我想在状态变化时通过 ajax 请求加载城市。但是，on change 事件不起作用

我正在使用下面的 HTML 代码

<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
    <label>Select state</label><span id="stateLoader"></span>
    <select class="hash-checkout__section-1-add-address-state form-control"></select>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
    <label>Select city</label><span id="cityLoader"></span>
    <select disabled class="hash-checkout__section-1-add-address-city form-control"></select>
</div>

在 ajax 响应下方，我使用将选项附加到状态

.done( function( resp ) {
    $( '#stateLoader' ).html( '' );
    $this.attr( 'disabled', false );

    if ( resp.status === 'success' )
        {
            stateDataStatus = true;
            $.each( resp.states , function( index, val ) {
                 $this.append( val );
            });
        }
})

然后我使用下面的代码来触发 onChange 事件

$( 'body' ).on( 'change', '.hash-checkout__section-1-add-address-state', function()
  {
    alert('triggered');
    // $( '#cityLoader' ).html( dataLoader );
  });

但由于某种原因，on change 没有触发，我不确定为什么？为什么？

标签： javascriptjquery

您好我已经为您测试了这种安排：

这很简单，您应该使用以下命令添加新的 val 作为选项：

$this.append( "<option>" + val + "</option>" );

HTML 索引.html：

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
var stateDataStatus = false;

$(document).ready(function () {

  $( 'body' ).on( 'change', '.hash-checkout__section-1-add-address-state', function()
  {
    alert('triggered');
    // $( '#cityLoader' ).html( dataLoader );
  });

  $( 'body' ).on( 'click focus', '.hash-checkout__section-1-add-address-state', function() {
    //
    // do nothing if having already done:
    //
    if(stateDataStatus) {
        return  false;
    }
    //
    $this = $( this );
    $.ajax({
      url: "getstates.php"
    }).done( function( resp ) {
      //$( '#stateLoader' ).html( '' );
      //$this.attr( 'disabled', false );
      
      //alert(resp);
      
      if ( resp.status === 'success' ) {
        $.each( resp.states , function( index, val ) {
          $this.append( "<option>" + val + "</option>" );
        });
        
        
        stateDataStatus = true;
     
      }
    });
  });

});
</script>
</head>
<body>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
    <label>Select state</label><span id="stateLoader"></span>
    <select class="hash-checkout__section-1-add-address-state form-control"></select>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
    <label>Select city</label><span id="cityLoader"></span>
    <select disabled class="hash-checkout__section-1-add-address-city form-control"></select>
</div>

</body>
</html>

jQuery.ajax() 调用 getstates.php，它只返回一个 JSON 对象，如下所示：

<?php
header("Content-Type: application/json; charset=UTF-8");
$array = ["status" => "success", "states" => ["france", "china", "usa"]];
echo json_encode($array, JSON_PRETTY_PRINT);
?>

javascript - jQuery on change 不触发选择

问题描述

解决方案

推荐阅读