背景
我一直在使用 JQuery UI 插件来创建一个加载动态内容的对话框。
所以我加载了一个 html 文档,该文档显示了一系列可选项目,其中包含值的复选框:A、B、C、D、E
假设我勾选了“A、C、E”
我按下了一个提交按钮,它利用了对服务器的 AJAX 调用。服务器接收数据“A、C、E”,执行一系列查询并吐出数据和html来保存数据内容。像:
<input id="radio1" name="selGroup" type="radio" value="1"><p class="test"> 1 </p>
<input id="radio3" name="selGroup" type="radio" value="3"><p class="test"> 3 </p>
<input id="radio5" name="selGroup" type="radio" value="5"><p class="test"> 5 </p>
<input id="enterBttn" type="button" value="Submit">
此 html 内容返回到客户端并被转储到:
<div id="dialogCheck" title="Select one of these options"></div>
这是通过使用 jQuery 完成的:
$("#dialogCheck").html(content);
测试
因此,我检查是否一切正常,并且确实如此。我得到一个对话框,其中包含我想要选择的单选按钮和值。但现在我想添加一些交互性。
问题
当我打开一个带有从服务器注入的 html 的对话框时,它会在屏幕上显示内容,但是当我想在原始源代码上查看新的 html 时。它不存在。它只是显示为:
<div id="dialogCheck" title="Select one of these options"></div>
当我使用 JQuery 的 "$("#dialogCheck").html(content);" 插入。我阅读了文档,它提到了它如何不将 html 附加到原始源代码中。所以我的问题是,我应该如何在我注入的 html 之上添加 JQuery 脚本?
怪人
如果我传入如下所示的内容:
$("#enterBttn").click(function(){
$( "#dialogCheck" ).dialog("destroy");
});
有用!我创建的 enterBttn 破坏了对话框。但是,如果我想添加悬停功能,例如,如果我想在对话框顶部突出显示文本或大纲 div,它将不起作用,因为它在原始源代码中不存在。
$(".test").hover(
function(){
$(this).append($("<span> ***</span>"));
},
function(){
$(this).find("span:last").remove();
});