0

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

问题:如何重新绑定菜单栏 js,使其在 ajax 调用后工作?我正在阅读关于这个确切主题的 SO,但未能使用.live ().on()display()等等……

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Domain Auctions R US</title>
        <link rel="stylesheet" href="../css/style.css" type="text/css" media="screen"/>
        <style>
            body{
                background-repeat:no-repeat;
                background-color:#fff;
            }

            span.reference{
                position:fixed;
                left:10px;
                bottom:10px;
                font-size:12px;
            }
            span.reference a{
                color:#aaa;
                text-transform:uppercase;
                text-decoration:none;
                text-shadow:1px 1px 1px #000;
                margin-right:30px;
            }
            span.reference a:hover{
                color:#ddd;
            }
            ul.sdt_menu{
                margin-left:auto;
                margin-right:auto;
                margin-top:0px;
            }

        </style>
    </head>
<body>
<br/><br/><br/><br/>
        <div class="content" id="content">
            <ul id="sdt_menu" class="sdt_menu">
                <li>
                    <a href="#"><!-- When the other two results pages are ready, this needs to be a real link -->
                        <img src="../images/googleMap.jpg" alt=""/>
                        <span class="sdt_active"></span>
                        <span class="sdt_wrap">
                            <span class="sdt_link">Loading</span>
                            <span class="sdt_descr">Page not yet available</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">Loading</span>
                            <span class="sdt_descr">Page not yet available</span>
                        </span>
                    </a>
                </li>   
            </ul>
        </div>

        <h1>The URL you are searching for is currenly TAKEN.</h1>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="../js/jquery.easing.1.3.js"></script>
        <script type="text/javascript">
            $(function() {
                $('#sdt_menu > li').bind('mouseenter',function(){ //LINE SWITCH 1
                    var $elem = $(this);
                    $elem.find('img')
                         .stop(true)
                         .animate({
                            'width':'170px',
                            'height':'170px',
                            'left':'0px'
                         },400,'easeOutBack')
                         .andSelf()
                         .find('.sdt_wrap')
                         .stop(true)
                         .animate({'top':'140px'},500,'easeOutBack')
                         .andSelf()
                         .find('.sdt_active')
                         .stop(true)
                         .animate({'height':'170px'},300,function(){
                        var $sub_menu = $elem.find('.sdt_box');
                        if($sub_menu.length){
                            var left = '170px';
                            if($elem.parent().children().length == $elem.index()+1)
                                left = '-170px';
                            $sub_menu.show().animate({'left':left},200);
                        }   
                    });
                }).bind('mouseleave',function(){ //LINE SWITCH 2
                    var $elem = $(this);
                    var $sub_menu = $elem.find('.sdt_box');
                    if($sub_menu.length)
                        $sub_menu.hide().css('left','0px');

                    $elem.find('.sdt_active')
                         .stop(true)
                         .animate({'height':'0px'},300)
                         .andSelf().find('img')
                         .stop(true)
                         .animate({
                            'width':'0px',
                            'height':'0px',
                            'left':'85px'},400)
                         .andSelf()
                         .find('.sdt_wrap')
                         .stop(true)
                         .animate({'top':'25px'},500);
                });
            });

                var myVar=setInterval(function(){ajax_request()},2000);
                  function ajax_request() {
                  $.ajax({
                  type: "GET",
                  url: "http://exampleServer/urlID/4b49d2/index.html",
                  dataType: "script",
                  success: function() {
                  $('#conn').load("ajax-loader.html");


                  clearInterval(myVar);
                  },
                  error: function() {
                    alert("error");
                  }
                });
                }
        </script>

</body>
</html>

ajax-loader.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>
4

2 回答 2

1

这应该很简单,使用.on()而不是.bind()

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

请注意,.bind()and.on()的工作方式不同,简单的重命名不起作用。

于 2013-01-24T23:55:47.763 回答
0

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

http://api.jquery.com/delegate/

于 2013-01-24T23:49:42.150 回答