Question

我有一个附加到下拉列表的Jquery XMLHttpRequest，当选择被更改时，它会从数据库中返回以下代码：

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

效果很好，但后来又有了另一个返回图片的Jquery（hint-tooltip），当鼠标悬停在输入框上时，它会显示在输入框的旁边。

$(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已经被执行了，我相信。

我尝试过使用 ：可见选择器 - 什么都不做每个输入框上的 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

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

这样的东西

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

这将委托事件，以便在元素发生变化时不会分离。

Answer 2

尝试使用$（＆＃34;＃test1＆＃34;）。on（＆＃39;工具提示＆＃39;）或将代码移至XMLHttpRequest的回调函数

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

$('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

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

2 个答案: