动态创建一个select，然后更改ajax调用以附加html

Dynamically creating a select and then on change ajax call to append html

本文关键字：ajax 调用 html 然后 创建 select 一个 动态      更新时间：2023-09-26

我有添加选项卡功能的导航，而添加选项卡时，内容div会填充一个选择框。现在从选项的选择框上更改将调用相应的表单并附加到页面上。

index.php

<ul id="myTab" role="tablist">
          <li role="presentation"><a href="#q1"  role="tab" >Form 1</a></li>
          <li><a href="#" class="add-contact" >Add Forms</a></li>
</ul>

上面的导航添加选项卡并在index.php 中创建下面的div

<div class="tab-content">
     <div role="tabpanel" class="tab-pane fade in active" id="q1">
      <form id="id1" class="form-horizontal" method="post">
          <select id="" class="form-control" name="">
             <option value="form1">Form 1</option>
             <option value="form2">Form 2</option>
          </select><form>
</div>

div选项卡内容中的内容得到动态创建的

$( document ).ready(function() {
$('select').bind('change', function(){
      $.ajax({ 
    url: "htmlforms.php", 
    context: document.body, 
    success: function(html){
    $("#contentForm").append(html);
  }});
});});

现在，我需要的是更改使用ajax调用添加表单并附加到div选项卡内容中所需的选项。

正如注释中所指出的，您必须为select上的change事件委派事件处理程序。这是因为select位于初始创建DOM后修改/添加的内容中。

$(document).ready(function(){
    $(document).on('change', 'select', function(){
        $.ajax({ 
            url: "htmlforms.php", 
            context: document.body, 
            success: function(html){
            $("#contentForm").append(html);
        }});
    });
});

.on((的jQuery API文档

相关文章：