Question

这有点奇怪。

我的标题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');
});

当我取消注释`警告（$（'A＃signOut'））; 我能够得到警报但是当我删除它时，我没有得到警报。

有任何线索吗？

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

Answer 2

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

应位于.ready()回调

内

Answer 3

这可能是加载的异步性质的问题。如何在完整的负载回调中执行ajax调用？因此，在加载完成后你正在进行ajax，因此可以保证锚＃a signout存在。

$(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.");
    }
});

});

});

JQuery - 无法在锚点上生成Click事件

3 个答案: