Question

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

问题：如何在ajax调用后重新绑定菜单栏js以使其正常工作？我正在阅读关于这个确切主题的SO，但没有使用.live()，.on()，display()和more ......

<!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>

Answer 1

这应该很简单，使用.on()代替.bind()：

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

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

Answer 2

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

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

在Ajax之后重新绑定菜单Js

2 个答案: