1

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

6 回答 6

1

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

(function($) {
  console.log('DOM Loaded!');
  collapseNotes();
})($);
于 2013-02-27T13:30:26.613 回答
0 
$(document).ready(function () { 
    collapseNotes();
});
于 2013-02-27T13:27:28.040 回答
0

尝试将整个 JQuery 放入：

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

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

于 2013-02-27T13:28:31.577 回答
0

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

});
于 2013-02-27T13:28:55.813 回答
0

试试jQuery 的 ready()函数：

$(document).ready(function() {
    collapseNotes();
});
于 2013-02-27T13:32:58.640 回答
0

从您的评论中，很明显您正在 AJAX 回调中创建注释。您的调用collapseNotes在回调之外，因此不会等到 AJAX 请求完成。

您的解决方案是将调用移至collapseNotesAJAX ( 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(). 它不会等待服务器响应请求，即触发您的回调。

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

于 2013-02-27T13:52:13.633 回答