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 回答