Javascript Ajax之后重新绑定菜单Js

我正在建立一个在线URL拍卖工具。下面是用户输入要购买的URL后的结果页面。当调用此结果页时，将创建另外两个结果页，但它们需要一段时间，因此我尝试设置菜单栏以在两个按钮和href to#上读取“加载”。然后，我使用setInterval每隔2秒轮询一次，检查第二个文件是否已创建。一旦成功，success回调会将按钮重新加载到活动的href，并将其标记为['Find Whois'和'evaluation']，而不是'Loading'

问题：如何重新绑定菜单栏js，使其在ajax调用后工作？我正在读关于这个主题的书，但在使用、、和时失败了

美国域名拍卖
身体{
背景重复：无重复；
背景色：#fff；
}
span.reference{
位置：固定；
左：10px；
底部：10px；
字体大小：12px；
}
参考文献a{
颜色：#aaa；
文本转换：大写；
文字装饰：无；
文本阴影：1px 1px 1px#000；
右边距：30px；
}
参考a：悬停{
颜色：#ddd；
}
ul.sdt_菜单{
左边距：自动；
右边距：自动；
边际上限：0px；
}












您正在搜索的URL当前已被占用。
$（函数（）{
$（'sdt_menu>li'）.bind（'mouseenter'，function（）{//线路开关1
变量$elem=$（本）；
$elem.find（'img'））
.停止（正确）
.制作动画({
“宽度”：“170px”，
“高度”：“170px”，
“左”：“0px”
}，400，'easeOutBack'）
.andSelf（）
.find（“.sdt_wrap”）
.停止（正确）
.animate（{'top'：'140px'}，500，'easeOutBack'）
.andSelf（）
.find（“.sdt_活动”）
.停止（正确）
.animate（{'height'：'170px'}，300，function（）{
var$sub_menu=$elem.find（'.sdt_框'）；
如果（$sub_menu.length）{
左变量='170px'；
如果（$elem.parent（）.children（）.length==$elem.index（）+1）
左='-170px'；
$sub_menu.show（）.animate（{'left'：left}，200）；
}   
});
}).bind（'mouseleave'，function（）{//线路开关2
变量$elem=$（本）；
var$sub_menu=$elem.find（'.sdt_框'）；
如果（$sub_menu.length）
$sub_menu.hide（）.css（'left'，'0px'）；
$elem.find（“.sdt\u活动”）
.停止（正确）
.animate（{'height'：'0px'}，300）
.andSelf（）.find（'img'））
.停止（正确）
.制作动画({
“宽度”：“0px”，
“高度”：“0px”，
'左'：'85px'}，400）
.andSelf（）
.find（“.sdt_wrap”）
.停止（正确）
.animate（{'top'：'25px'}，500）；
});
});
var myVar=setInterval（function（）{ajax_request（）}，2000）；
函数ajax_request（）{
$.ajax({
键入：“获取”，
url:“http://exampleServer/urlID/4b49d2/index.html",
数据类型：“脚本”，
成功：函数（）{
$（'#conn'）.load（“ajax loader.html”）；
净距（myVar）；
},
错误：函数（）{
警报（“错误”）；
}
});
}

ajaxloader.html

<ul id="sdt_menu" class="sdt_menu">
                <li>
                    <a href="../map.html">
                        <img src="../images/googleMap.jpg" alt=""/>
                        <span class="sdt_active"></span>
                        <span class="sdt_wrap">
                            <span class="sdt_link">Find out Whois</span>
                            <span class="sdt_descr">Map of Who Owns Domain</span>
                        </span>
                    </a>
                </li>
                <li>
                    <a href="worth.html">
                        <img src="../images/pawnShop.jpg" alt=""/>
                        <span class="sdt_active"></span>
                        <span class="sdt_wrap">
                            <span class="sdt_link">Appraisal</span>
                            <span class="sdt_descr">Real Time Value of Domain</span>
                        </span>
                    </a>
                </li>   
            </ul>

您可以使用委托将事件绑定到所有当前和未来元素：

---

这应该足够简单，使用

.on（）

而不是

.bind（）

：

---

请注意，

.bind（）

和

.on（）

的工作方式不同，简单的重命名不起作用。

他使用的是jQuery 1.8.1，应该用它来代替

。delegate（）

谢谢你的帖子。我试过了，除了菜单栏动画在ajax之后没有响应外，它还能工作。具体来说，我对“线路开关1和2”进行了注释，其中我将“绑定”切换为“开启”。或者这不是我应该做的吗？@Chris是的，那是你应该做出改变的地方。。。如果动画没有响应，你怎么知道它能工作呢，因为里面几乎所有的代码都是关于动画的？你不是刚刚打开了

bind

for

吗？参数是不同的，需要匹配@Jack发布的内容，以及更改父jQuery选择器。@Chris注意jmoerdyk所说的话。@Jack，我的意思是，菜单标题已更改，鼠标上的菜单标题现在指向正确的URL。但是，我只切换了单词，而不是参数结构。
<ul id="sdt_menu" class="sdt_menu">
                <li>
                    <a href="../map.html">
                        <img src="../images/googleMap.jpg" alt=""/>
                        <span class="sdt_active"></span>
                        <span class="sdt_wrap">
                            <span class="sdt_link">Find out Whois</span>
                            <span class="sdt_descr">Map of Who Owns Domain</span>
                        </span>
                    </a>
                </li>
                <li>
                    <a href="worth.html">
                        <img src="../images/pawnShop.jpg" alt=""/>
                        <span class="sdt_active"></span>
                        <span class="sdt_wrap">
                            <span class="sdt_link">Appraisal</span>
                            <span class="sdt_descr">Real Time Value of Domain</span>
                        </span>
                    </a>
                </li>   
            </ul>

$('#content')
    .on('mouseenter', '.sdt_menu > li', function() {
    })
    .on('mouseleave', '.sdt_menu > li', function() {
    })