0

这是一个奇怪的问题。

我的标题 HTML 看起来像

<div class="nav-collapse collapse ">
                        <!-- .nav, .navbar-search, .navbar-form, etc -->
                        <ul class="nav pull-right">
                            <li style="float: left;"><a href="home.html">Home</a></li>
                            <li style="float: left;padding-left: 30pt;"><a id="selDb" href="selectDatabase.html">Do Something</a>
                            </li>
                            <li style="float: left;padding-left: 30pt;"><a href="coming-soon.html">Refresh</a></li>
                            <li style="float: left;padding-left: 30pt;"><a href="coming-soon.html">Start XYZ</a></li>
                            <li style="float: left;padding-left: 30pt;"><a id="signOut" href="#">Sign Out</a></li>
                        </ul>
                    </div>

我的 JS 代码

$(document).ready(function() {
    $('#head').load('header.html');
    $.ajax({
         type: 'get',
         url: 'someUrl/signout',
         cache: 'false',
         success: function(data) {
               $('A#signOut').attr('HREF', data);
         },
         error: function(error) {
               alert("Internal server error.");
         }
    });
 });

//alert($('A#signOut'));
$('A#signOut').click(function() {
    alert('Signout Clicked');
});

当我取消注释`alert($('A#signOut')); 我能够收到警报，但是当我删除它时，我没有收到警报。

有什么线索吗？

4

3 回答 3

1

作品：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

</head>
<body>

<div class="nav-collapse collapse ">
<!-- .nav, .navbar-search, .navbar-form, etc -->
<ul class="nav pull-right">
<li style="float: left;"><a href="home.html">Home</a></li>
<li style="float: left;padding-left: 30pt;"><a id="selDb" href="selectDatabase.html">Do Something</a></li>
<li style="float: left;padding-left: 30pt;"><a href="coming-soon.html">Refresh</a></li>
<li style="float: left;padding-left: 30pt;"><a href="coming-soon.html">Start XYZ</a></li>
<li style="float: left;padding-left: 30pt;"><a id="signOut" href="#">Sign Out</a></li>
</ul>
</div>

<script type="text/javascript">

$(document).ready(function() {
$('#head').load('header.html');
$.ajax({
    type: 'get',
    url: 'someUrl/signout',
    cache: 'false',
    success: function(data) {
        $('a#signOut').attr('href', data);
    },
    error: function(error) {
        alert("Internal server error.");
    }
});

});

$('a#signOut').click(function() {
alert('Signout Clicked');
});

</script>

</body>
</html>
于 2013-10-10T21:51:32.557 回答
1 
$('a#signOut').click(function() { alert('Signout Clicked'); });

应该在.ready()回调里面

于 2013-10-10T21:57:53.407 回答
0

这可能是负载的异步性质的问题。在加载的完整回调中执行 ajax 调用怎么样？这样可以保证锚 a#signout 存在，因为您在加载完成后执行 ajax。

$(document).ready(function() {
$('#head').load('header.html', function(){

   $.ajax({
    type: 'get',
    url: 'someUrl/signout',
    cache: 'false',
    success: function(data) {
        $('A#signOut').attr('HREF', data);
    },
    error: function(error) {
        alert("Internal server error.");
    }
});

});

});
于 2013-10-10T21:30:41.457 回答