0

背景

我一直在使用 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();
});
4

3 回答 3

1

新的 HTML 是否在“原始源代码”中没有区别（除了调试更容易，用户可以在客户端轻松保存页面）。但是，如果您真的希望某些内容出现在“原始源代码”中，那么您不应该使用 AJAX，而是应该重新加载整个页面并在服务器端插入额外的 HTML。

因此，无论 HTML 源代码如何，一切都应该正常工作。我猜您的代码不起作用，因为您在错误的时间执行它（例如，在插入新 HTML 之前）。您能否添加更多详细信息？

于 2012-07-09T14:36:25.283 回答
1

可以对通过 AJAX 插入的 html 元素使用事件处理。jquery ON() http://api.jquery.com/on/函数可用于此目的，或者当使用旧版本的 jquery 时，使用 LIVE() 函数。

于 2012-07-09T14:57:58.683 回答
0

好的，弄清楚发生了什么：

这两个都有效：

$("#enterBttn").hover(function(){
    $(".attriblst").append($("<span> ***</span>"));;
}, function(){
    $(".attriblst").find("span:last").remove();
});

和：

$("#dialogCheck").on({
    mouseenter: function(){
        $("p").append($("<span> ***</span>"));
    },
    mouseleave: function(){
        $("p").find("span:last").remove();
    }
 },"#enterBttn");

发生的事情是我插入代码的范围。我把它们放在文档准备部分，如果我把它拿出来放在我用来调用我的对话框的函数中（在文档准备好的外面），那么它就起作用了！多谢你们 ：）

于 2012-07-09T16:36:00.180 回答