jquery - Jquery动画功能在第二次点击时触发

Question

$(document).ready(function () {
    $("#currentProject").click(function () {
        $("#projects").animate({
            height: "toggle"
        }, 800, function () {
            // Animation complete.
            $.get("<?php  echo base_url('async/projects'); ?>", function (data) {
                //alert(data[0].name);
                $("#projects").empty();
                $('#projects').append("<ul id='newList'></ul>");
                $.each(data, function (key, value) {
                    //alert(value.name);
                    $("#newList").append("<li><a style='text-decoration:none' href='<?php echo base_url();      ?>dashboard/index/" + value.cId + "'>" + value.name + "</a></li>");
                });
            }, "json");
        });
    });
});

上面的代码完全按照我的要求工作。唯一的问题是它在第二次点击时开始工作。当我第一次单击时，#currentProject没有任何反应，它从第二次单击开始运行。

Answer 1

在没有 $(document).ready 的文档末尾写下你的 js 代码

Answer 2

每当我遇到这个问题时，这些解决方案都对我有用，请尝试使用或实时使用，具体取决于您使用的哪个版本可以工作

 $(document).on('click', '#currentProject', function() {        

    });

 $( "#currentProject" ).on( "click", function() {

  });

  $( "#currentProject" ).live( "click", function() {

 });

Answer 3

$(document).ready(function () {
  $('#projects').hide();
  $("#currentProject").click(function () {
    $("#projects").animate({
        height: "toggle"
    }, 800, function () {
        // Animation complete.
        $.get("<?php  echo base_url('async/projects'); ?>", function (data) {
            //alert(data[0].name);
            $("#projects").empty();
            $('#projects').append("<ul id='newList'></ul>");
            $.each(data, function (key, value) {
                //alert(value.name);
                $("#newList").append("<li><a style='text-decoration:none' href='<?php echo base_url();      ?>dashboard/index/" + value.cId + "'>" + value.name + "</a></li>");
            });
        }, "json");
    });
  });
});

http://fiddle.jshell.net/29MdL/1/