如何访问javascript或jquery生成的动态元素?

问题描述 投票:0回答:0

我尝试在 boostrap-table 开始呈现之前为 select 设置默认值(选定值)。 我成功创建了选择更改事件,但未能在页面加载时创建。 请告诉我正确的方向....

使用最新版本的 Jquery 3.6 和 bootstap-table 1.21.3 HTML代码:

<body>
  <div style="position:relative;width: 80%; margin: 0 auto; text-align: center;">

    <div class="toolbar" style="border: 1px solid red;width: 100%;padding:2px;">
         <!--Here you can write extra buttons/actions for the toolbar--> 
          <select class="form-select" aria-live="polite" id="jails" name="jails">
          
          </select>        
        </div>

        <table id="table" ></table>
  </div>
</body>

$(document).ready(function(){

       $.ajax({
             type: "GET",
             url: "action.php?status",
             dataType: "json",
             contentType: 'application/json; charset=utf-8',
             success: function (response, textStatus, xhr) {

                      $.each( xhr.responseJSON.reply, function( index, value ){
                          var matched = value.indexOf("aster");
                          var defaults = matched == 0 ? 'selected' : '';
                          $('#jails').append($('<option></option>').val(value).html(value));  
                      });                    
             }  
       });

      $('#jails').change(function(){
           var jail = "";
           var url = "action.php?status";
           $( "select option:selected" ).each(function() {       jail = $( this ).text(); });

           $.table.bootstrapTable('refresh', {
                url: url + "&jail=" + jail ,
                refreshOptions: {url: url + "&jail=" + jail
               }
            });
      });

//other code for table
$table.bootstrapTable(tableConfig);
//other code for table
});

我尝试使用很多方法访问带有 id jails 的选择

$(document).find("#jails") - In Chrome DevTools shows all dynamic options, but wont accessible(
$(document).find("#jails").children() - nothing
    $(document).on('all.bs.table', function (e, name, args) {
      //load-success.bs.table
      console.log(name, args);
      if(name == 'reset-view.bs.table'){
        $(document).find("#jails").children();
      }
    })

javascript jquery bootstrap-table
© www.soinside.com 2019 - 2024. All rights reserved.