在使用 XMLHttpRequest 调用的 DIV 上执行 JQuery 函数？

Question

i有一个Jquery xmlhttprequest附加到下拉列表中，该下拉列表returns在更改选择时，来自数据库的代码：

<label for="trial"> Trial1
<input type"text" id='test1' title=''>
&nbsp;
<label for="trial"> Trial2
<input type"text" id='test2' title=''>

效果很好，但是我有另一个 Jquery returns 一张图片（提示工具提示），当鼠标悬停在输入框上时，它会显示在输入框旁边。

$(function() {
        $( "#test1" ).tooltip({ 
        content: '<img src="http://www.lessons4living.com/images/penclchk.gif"/>' });
        $( "#test2" ).tooltip({ 
        content: '<img src="http://www.lessons4living.com/images/penclchk.gif"/>' });

    $( "[title]" ).tooltip({
position: {
my: "left top",
at: "right+5 top-5"
}
});
});

当网站加载时输入框已经在 HTML 中时，它工作得很好，但当这些通过 jquery XMLHttpRequest 返回时不起作用，因为 Jquery 有我相信已经被处决了。

我试过使用 :visible Selector - 什么都不做 OnMouseover 每个输入框上的标签 - 执行代码一次并显示图像，但不会再次执行并且似乎间歇性工作 OnHover Jquery 功能 - 什么都不做

http://jsfiddle.net/dfkhrcst/

有什么方法可以在返回输入框后执行上面的函数吗？

谢谢

更新：忘记添加 xmlhttprequest

function a(str) {
    if (str == "") {
        document.getElementById("test").innerHTML = "";
        return;
    } else {
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("test").innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","test.php?a="+str,true);
        xmlhttp.send();
    }

}

Answer 1

尝试使用 $( "#test1" ).on('tooltip') 或将您的代码移动到 XMLHttpRequest

的回调函数

您应该学习 ajax 和 jquery 中的事件处理，因为您已经在代码中包含了它

$('select').on('change', function(){//better to use and id on the select element
    $this = $(this);//creating an alias of the current selected item as a jquery object- so i use a $ in the var name to remind me its a jquery object
    $('#test').load('test.php?a='+$this.val(), function(){//[load][2] a quick function to fill a element with the result of the request
         $( "#test" ).tooltip({ 
            content: '<img src="http://www.lessons4living.com/images/penclchk.gif"/>' });
         $( "[title]" ).tooltip({
                            position: {
                            my: "left top",
                            at: "right+5 top-5"
            });
   });//end load handler
});//end on select

Answer 2

您可能需要事件委托。将事件处理程序附加到未动态添加的父元素。当您的 ajax returns 元素时，它将分离事件处理程序。像

$("form").on("tooltip", "#test1", function(){do stuff here});

这将委托事件，因此它不会在元素更改时分离。

在使用 XMLHttpRequest 调用的 DIV 上执行 JQuery 函数？

Execute JQuery function on DIV that's called using XMLHttpRequest?

html

javascript

css

ajax

jquery