javascript - 动态创建一个选择,然后更改 ajax 调用以附加 html

标签 javascript php jquery ajax select

<分区>

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

索引.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>

在 nav 上方添加标签并在 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 tab-content 中的内容是动态创建的

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

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

最佳答案

正如评论中所指出的,您必须为 select 上的 change 事件委托(delegate)您的事件处理程序。这是因为 select 位于初始创建 DOM 后修改/添加的内容中。

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

jQuery API Documentation for .on()

关于javascript - 动态创建一个选择,然后更改 ajax 调用以附加 html,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31476903/

相关文章:

javascript - Javascript-DOM重绘方法是否同步?

php - 添加列 codeigniter

php - Uncaught Error : Call to a member function

javascript - 阻止人们通过导航到其他地方来绕过我的表单验证

javascript - IE9输入类型文件获取二进制数据

javascript - 在对象创建中运行循环

Javascript 日期是休息日吗?

javascript - 如何通过单击链接更新 MySQL 数据库行?

javascript - 仅在查看时才删除 Google map 标记

javascript - 检测到字符串时从类中获取 ID