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).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/

Answer 3

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

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

    });

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

  });

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

 });