Question

背景的

我一直在使用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（内容）;”插入。我阅读了文档，并提到它如何不将html附加到原始源代码中。所以我的问题是，我应该如何在我注入的html之上添加JQuery脚本？

The Wierd

如果我传入的内容如下：

$("#enterBttn").click(function(){ 
     $( "#dialogCheck" ).dialog("destroy");
 });

有效！我创建的enterBttn会破坏对话框。然而如果我想添加悬停功能，比如我想在对话框顶部突出显示文本或大纲div，它将无法工作，因为它在原始源代码中不存在。

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

Answer 1

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

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

Answer 2

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

Answer 3

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

这两项都有效：

$("#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");

我插入代码的范围发生了什么。我把它们保存在文件准备部分，如果我把它拿出来放在我用来调用我的对话框的功能中（在文件准备就绪之外），那么它就可以了！谢谢你们:)）

远程加载HTML到JQUERY UI对话框的交互性

背景的

测试

问题

The Wierd

3 个答案: