Javascript 单击“在任何条件下都不工作”

我只有一个简单的超链接，当我试图添加

click（）

事件处理程序时，它不起作用。我试过，

.on（），.live（），.delegate（）

它们都不起作用。我怎么做

我不能胡闹，因为我不知道为什么我的bootstrap.min.css没有包含在外部资源部分中

请告诉我还有什么别的办法

我的代码：

<div class="navbar nav-fixed-top navbar-inverse" style="min-height: 50px; margin-bottom: 0; box-shadow: 0px 2px 5px #222;">
    <!-- Creating a fixed to the top navbar with no bottom margin and a nice little shadow and increasing the height -->
    <div class="navbar-inner" style="border-radius: 0;min-height: 50px; ">
        <!-- Creating the inner content of navbar and increasng it's height aswell to match the parent's height aswell -->
        <div class="container-fluid">
            <!-- Main header starts -->
            <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <!-- Small screen collapseable menu starts -->  <span class="icon-bar"></span>  <span class="icon-bar"></span>  <span class="icon-bar"></span> 
                <!-- The collapseable menu icon(becuase the three `icon-bar` make an icon :P) -->
            </button>   <a class="brand" href="#"><img src="img/logo.png"
                    style="height: 25px;" /> </a> 
            <!-- adding the logo to the header -->
            <div class="nav-collapse collapse pull-right">
                <!-- div holding collapseable menu's data -->
                <ul class="nav">
                    <!-- creating a list to be created in the collapseable menu -->
                    <li><a href="#" id="register_button">Register</a>
                    </li>
                    <!-- adding an hyper link to the collapseable menu -->
                </ul>
                <!-- closing the list -->
            </div>
            <!-- closing the div holding collapseable menu's data -->
        </div>
        <!-- closing the main header -->
    </div>
    <!-- closing inner content holder of navbar div -->
</div>
<!-- closing the fixed to top navbar holder -->

var registerBtn = $("#register_button"); //storing the hyperlink of register in a variable
var i = 0; //click count
$(registerBtn).on('click', function (e) {
    i++;
    if (i % 2 === 0) {
        $("#register_frm").fadeToggle('fast', function () {
            $("#login_frm").fadeToggle('fast');
        });
        $("#register").text('Register');
    } else {
        $("#login_frm").fadeToggle('fast', function () {
            $("#register_frm").fadeToggle('fast');
        });
        $("#register").text('Login');
    }
});

HTML:

<div class="navbar nav-fixed-top navbar-inverse" style="min-height: 50px; margin-bottom: 0; box-shadow: 0px 2px 5px #222;">
    <!-- Creating a fixed to the top navbar with no bottom margin and a nice little shadow and increasing the height -->
    <div class="navbar-inner" style="border-radius: 0;min-height: 50px; ">
        <!-- Creating the inner content of navbar and increasng it's height aswell to match the parent's height aswell -->
        <div class="container-fluid">
            <!-- Main header starts -->
            <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <!-- Small screen collapseable menu starts -->  <span class="icon-bar"></span>  <span class="icon-bar"></span>  <span class="icon-bar"></span> 
                <!-- The collapseable menu icon(becuase the three `icon-bar` make an icon :P) -->
            </button>   <a class="brand" href="#"><img src="img/logo.png"
                    style="height: 25px;" /> </a> 
            <!-- adding the logo to the header -->
            <div class="nav-collapse collapse pull-right">
                <!-- div holding collapseable menu's data -->
                <ul class="nav">
                    <!-- creating a list to be created in the collapseable menu -->
                    <li><a href="#" id="register_button">Register</a>
                    </li>
                    <!-- adding an hyper link to the collapseable menu -->
                </ul>
                <!-- closing the list -->
            </div>
            <!-- closing the div holding collapseable menu's data -->
        </div>
        <!-- closing the main header -->
    </div>
    <!-- closing inner content holder of navbar div -->
</div>
<!-- closing the fixed to top navbar holder -->

var registerBtn = $("#register_button"); //storing the hyperlink of register in a variable
var i = 0; //click count
$(registerBtn).on('click', function (e) {
    i++;
    if (i % 2 === 0) {
        $("#register_frm").fadeToggle('fast', function () {
            $("#login_frm").fadeToggle('fast');
        });
        $("#register").text('Register');
    } else {
        $("#login_frm").fadeToggle('fast', function () {
            $("#register_frm").fadeToggle('fast');
        });
        $("#register").text('Login');
    }
});

---

有什么建议吗？

可能是在DOM中创建元素之前执行处理程序绑定。将代码移动到文档末尾（创建元素后），或将其包装到就绪事件中：

$(function() {
    var registerBtn = $("#register_button"); //storing the hyperlink of register in a variable
    var i = 0; //click count
    $(registerBtn).on('click', function (e) {
        i++;
        if (i % 2 === 0) {
            $("#register_frm").fadeToggle('fast', function () {
                $("#login_frm").fadeToggle('fast');
            });

    $("#register").text('Register');
        } else {
            $("#login_frm").fadeToggle('fast', function () {
                $("#register_frm").fadeToggle('fast');
            });
            $("#register").text('Login');
        }
    });
});

更改您的代码：

$(function() {
    var registerBtn = $("#register_button"); //storing the hyperlink of reg....

    var i = 0; //click count

    registerBtn.on('click', function (e) { // since registerBtn is a reference to anchor tag
        e.prevenDefault(); // prevent default behaviour of anchor tag
        .........
    });
});

---

移除

$（registerBtn）

周围的jQuery包装器，如果该JavaScript代码位于带有按钮的HTML之前，则不会发生任何事情。您可以将其放入“ready”处理程序中，或将其移动到

的末尾。防止单击锚链接的默认行为：

e.preventDefault（）

@MohammadAreebSiddiqui不可能，Sergio的回答只是删除了一个无用的包装，但这不会影响任何类型的行为way@MohammadAreebSiddiqui,jQuery包装不应该是此处的解决方案检查：-您是否也添加了.ready包装？也许这就是它成功的原因？