Question

我正在尝试使用.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();

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

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

Answer 5

尝试jQuery ready()功能：

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

Answer 6

从您的评论中，很明显您在AJAX回调中创建了注释。您对collapseNotes的调用不在回调范围内，因此不会等到AJAX请求完成。

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

$.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()。它 not 等待服务器响应请求，这就是你的回调被触发的时候。

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

jquery函数在单击内部工作，但在单独调用时不起作用

6 个答案: