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 に答える