jquery函数在click内有效，但在单独调用时无效答案

【问题标题】：jquery function works inside click but not when called alonejquery函数在click内有效，但在单独调用时无效
【发布时间】：2013-02-27 21:52:13
【问题描述】：

我正在尝试访问已使用 .html 插入的类元素。当我通过点击事件在函数中调用它时，它可以工作，但是当我直接调用它时，它没有......任何想法？

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

【问题讨论】：

函数本身没有问题。它可能被调用得太早（在 DOM 中访问 .note-content 之前）Demo
它在文档就绪声明中。否则我如何确保所有内容都已加载？
DOMReady 应该足够了，假设在调用 $('#textarea').html 之后调用它，它会插入注释。正如您从我发布的演示链接中可以看出的那样，在您的示例中调用该函数时该函数正在工作。问题出在其他地方。
好的会继续搜索，谢谢！
或者，发布更多信息。您的浏览器控制台中是否存在运行时错误？你知道你的脚本曾经到达collapseNotes()吗？您可以通过在函数中放置 alert 来验证这一点。您可以通过将alert($('.note-content').length); 放入collapseNotes 来进行更多调试，这将显示该函数已被调用以及是否找到任何注释。

标签： jquery function

【解决方案1】：

你在调用collapseNotes();在页面加载内容之前，记住JavaScript是一种异步语言，你应该在使用它之前等待一些东西准备好，例如：

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

【讨论】：

根据cmets的说法，不是这样的。
好的，会继续在代码中寻找正确的位置，谢谢！
你能分享更多关于你的代码的信息吗？它似乎在这里工作正常：codepen.io/anon/full/LDblp

【解决方案2】：

从您的 cmets 可以看出，您正在 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 行发送请求，然后立即转到下一条指令，即 collapseNotes()。它不会等待服务器响应请求，也就是你的回调被触发的时候。

您的代码从点击监听器执行时起作用的原因是浏览器有时间在您点击按钮之前完成请求（因此创建注释）。

【讨论】：

谢谢！！就是这样。很抱歉造成混乱。

【解决方案3】：

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

【讨论】：

【解决方案4】：

试试jQuery ready()函数：

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

【讨论】：

【解决方案5】：

尝试将整个 JQuery 放入：

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

应该通过确保加载整个 DOM 来解决它

【讨论】：

谢谢，我应该提到它已经在文档就绪声明中。
这是不正确的。该函数仍将被调用（但 DOM 可能尚未准备好）。

【解决方案6】：

LIVE DEMO

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();

});

【讨论】：