Javascript 使用jQuery ajax调用启动弹出窗口，其中包含表单元素_Javascript_Jquery_Html

Javascript 使用jQuery ajax调用启动弹出窗口，其中包含表单元素

javascript jquery html

Javascript 使用jQuery ajax调用启动弹出窗口，其中包含表单元素,javascript,jquery,html,Javascript,Jquery,Html,我有一个使用引导的网页。我试图做的是让用户在弹出窗口中输入两（2）条数据（很像登录）。当表单在页面上用html编码时，它可以正常工作。问题：我正在使用jQuery动态创建2（）元素。jQuery似乎找不到要附加到弹出窗口的元素。我假设，因为它们是动态的，而不是静态的元素。弹出窗口加载不正确，格式和位置不正确。一旦我能够让弹出窗口正常工作，我将尝试检索ajax调用的表单数据。这是我的密码： <body> <div id="newForm"></div> &l

我有一个使用引导的网页。我试图做的是让用户在弹出窗口中输入两（2）条数据（很像登录）。当表单在页面上用html编码时，它可以正常工作。问题：我正在使用jQuery动态创建2（）元素。jQuery似乎找不到要附加到弹出窗口的元素。我假设，因为它们是动态的，而不是静态的元素。弹出窗口加载不正确，格式和位置不正确。一旦我能够让弹出窗口正常工作，我将尝试检索ajax调用的表单数据。这是我的密码：

<body>

<div id="newForm"></div>

<!--  NOTE: image clicked below for popover to appear --> 

<div 
  style="position:absolute;left:230px;top:178px;width:120px;height:125px;">
        <a href="#" id="plus-circle">
             <img src="images/plus-circle-black.png">
        </a>
</div>

<script>   

    var idMtl = "mtlID";
    var idPrice = "mtlPrice";

 $(function() {

    $('[data-toggle="tooltip"]').tooltip()

    <!--  dynamic form elements created --> 
    inputMtlID = document.createElement("input");
    inputMtlPR = document.createElement("input");
    inputMtlID.setAttribute('id', idMtl);   
    inputMtlID.setAttribute('id', idPrice); 
    $("#newForm").append(inputMtlID);
    $("#newForm").append("<br>");
    $("#newForm").append("<br>");
    $("#newForm").append(inputMtlPR);

  })

   $(function() {

          $('#plus-circle').popover({

            delay: { "show": 500 },
            placement: 'top',
                    container: 'body',
            title: 'Change Mtl Price (Fixed to DataBase)',
            html:true,
            content: $("#newForm").html()

      })
    })


</script>


var idMtl=“mtlID”；
var idPrice=“mtlPrice”；
$（函数（）{
$（'[data toggle=“tooltip”]'）。tooltip（）
inputMtlID=document.createElement（“输入”）；
inputMtlPR=document.createElement（“输入”）；
inputMtlID.setAttribute（'id'，idMtl）；
inputMtlID.setAttribute（'id'，idPrice）；
$（“#newForm”）.append（inputMtlID）；
$（#newForm”）。追加（
）；
$（#newForm”）。追加（
）；
$（“#newForm”）.append（inputMtlPR）；
})
$（函数（）{
$（“#加圆圈”）.popover({
延迟：{“显示”：500}，
位置：'顶部'，
容器：'主体'，
标题：“更改Mtl价格（固定到数据库）”，
是的，
内容：$（“#newForm”）.html（）
})
})

提前感谢您对这个问题的帮助。詹姆斯

我已经试过你的代码，它对我来说相当有效。您可以使用

style

属性中的css改进popover内部的设计，就像在DOM中一样处理它（您知道我的意思）

从popover中检索数据的方式如下：

您无法从popover检索数据？谢谢您的回复。我要试一试。我知道它需要一些额外的jQuery代码。

$(document).on("click","#submit-form-inside-popover",function(){
    var popoverContent = $("#plus-circle").data("bs.popover").tip().find('.popover-content');
    var input = $('input:eq(0)',popoverContent).val();
    var input2 = $('.class_name',popoverContent).val();
});