Console.log() 元素在 JQuery 之后存在，但在 HTML 文档中，元素不存在

Question

我正在使用 JQuery 更新模态中的 select 元素。如果我执行 console.log，则该元素存在。

如果我检查元素，它不存在。

可能导致问题的原因是什么？ console.log 在 JQuery 有运行之后发生，这意味着它工作正常。如果你不在模态中执行，代码工作正常，但如果你在模态中执行，它不会追加。

什么会导致这种行为？

这是一个示例代码，它可以正常工作，但在我的计算机上不起作用。

var options = {
'option1': {'display': 'Series A', 'optionsB': {'name': 'John', 'city': 'Doe'}},
'option2': {'display': 'Series B', 'optionsB': {'name': 'Jane', 'city': 'Maria'}},
}
function updateOptions(){
   /* var options = $('#selectoptions').data('datasets') */;
   for (const opt1 in options) {
       $('#option1').append($('<option>', {
         value: opt1,
         text: options[opt1]['display']
          }))
        }
   
   $('#option1').on('click', function(){
   var option1 = $('#option1').val();
     for (const opt2 in options[option1]['optionsB']) {
         $('#option2').append($('<option>', {
           value: opt2,
           text: options[option1]['optionsB'][opt2]
            }))
          }
      })
}
$(function(){
updateOptions();
});

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<button type="button" id="examPle" data-bs-toggle="modal" data-bs-target="#exampleModal" class="btn btn-primary">Get Example</button>

<div id="exampleModal" class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Example Modal</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form class="form" id="exampleform" name="exaple" method="post" required> 
          <div id="selectoptions">
            <select id="option1" class="form-select form-select-sm mb-1">
              <option value="...">Select Option 1</option>
            </select>
            <select id="option2"  class="form-select form-select-sm mb-1">
              <option value="...">Select Option 2</option>
            </select>
         </div>
       </form>
     </div>
    </div>
  </div>
</div>

这是对问题的编辑：上面的代码显示了一个最小版本。整个代码是一个 Django 应用程序。我将上面的 html 代码编辑为

<div class="modal-body">
    <!-- {% csrf_token %} -->
    <p>Filter Collection</p>
    <div id="navpanel" data-datasets="{{ datasets }}">
    <select id="option1" class="form-select form-select-sm mb-1">
        <option value="...">Select Map Type</option>
    </select>
    </div>
</div>

python views.py 文件具有以下内容：

from .controls import datasets
import json
def maps(request):
    context = {
        'datasets': json.dumps(datasets),
    }
    return render(request, 'example.html', context)

.controls示例如下

datasets = {
    'series1': {
        'display': 'This first Text',
        'options': {
            'series1A': {
                'display' : 'This text for 1 A'
            },
            'series1B': {
                'display' : 'This text for 1 B'
            },
        },
     },
'series 2': {
        'display': 'This text',
        'options': {
            'series2A': {
                'display': 'This next text of 2 A',
                   },
            'series2B': {
                'display': 'This next text of 2 B'
                  },
               },
            },
}

和 javascript，您删除 var 选项变量并将其更改如下：

function updateOptions(){
       var options = $('#selectoptions').data('datasets');
       for (const opt1 in options) {
           $('#option1').append($('<option>', {
             value: opt1,
             text: options[opt1]['display']
              }))
            }
       
       $('#option1').on('click', function(){
       var option1 = $('#option1').val();
         for (const opt2 in options[option1]['optionsB']) {
             $('#option2').append($('<option>', {
               value: opt2,
               text: options[option1]['optionsB'][opt2]['display']
                }))
              }
          })
    }
    $(function(){
    updateOptions();
    });

Answer 1

答案是有另一个具有相同 ID 的元素。它正在更新那个而不是模态中的那个。

Console.log() 元素在 JQuery 之后存在，但在 HTML 文档中，元素不存在

Console.log() Element Exists after JQuery but in HTML document, Element doesn't exist

javascript

jquery

bootstrap-modal