jQuery函数在单击内起作用，但单独调用时不起作用

Question

我试图到达使用.html插入的类元素。 当我通过click事件在函数中调用它时，它可以工作，但是当我直接调用它时，它...没有任何想法吗？

$("#textarea).html("<div>Lorem ipusum<span class='note-content'>Note text</span>Lorem ipusum</div>");


function collapseNotes() {
$(".note-content").animate({
    width:"50px",
    opacity: ".3",
}); 
}

//this works
$("#button").click(function() {
    collapseNotes();
});

//this doesn't work
collapseNotes();

Answer 1

您正在调用collapseNotes(); 在将内容加载到页面上之前，请记住JavaScript是一种异步语言，在使用它之前，您应该等待准备就绪，例如：

(function($) {
  console.log('DOM Loaded!');
  collapseNotes();
})($);

Answer 2

$(document).ready(function () { 
    collapseNotes();
});

Answer 3

尝试将整个JQuery放入：

$(document).ready(function(){
//your code here
});

应该通过确保加载整个DOM来解决此问题

Answer 4

现场演示

function collapseNotes() {
    $(".note-content").animate({
        width:"50px",
        opacity: "0.3" // extra comma "," removed
    }, 800);           // animation time !
}

$(function(){ // DOM is ready to be manipulated

    // Missing an " $("#textarea) <--- fixed
    $("#textarea").html("<div>Lorem ipusum<span class='note-content'>Note text</span>Lorem ipusum</div>");

    //this works
    $("#button").click(function() {
        collapseNotes();
    });

    //this works
    collapseNotes();

});

Answer 5

试试jQuery ready（）函数：

$(document).ready(function() {
    collapseNotes();
});

Answer 6

根据您的注释，很明显，您是在AJAX回调中创建注释。 您对collapseNotes调用不在回调之外，因此不会等到AJAX请求完成。

您的解决方案是将调用移至AJAX（ getJSON ）回调内的collapseNotes ：

$.getJSON('text/1.json', function(data) {
    $("#chapter-text-area").html(data.content);
    collapseNotes(); // place the call here instead!
});

// this is called before the call to $('#chapter-text-area').html, 
// so no notes are found
collapseNotes();

由于AJAX请求是异步的，因此浏览器将在$.getJSON行发送请求，然后立即继续执行下一条指令，即$.getJSON collapseNotes() 。 它不会等待服务器响应该请求，也就是触发回调时。

从单击侦听器执行代码的原因是浏览器有足够的时间在单击按钮之前完成请求（因此创建注释）。