Javascript と jQuery で付箋を作成しようとしています。私が抱えている問題は、新しく追加された要素draggable()で関数とdeleteNote()を呼び出すことができないということです。どうすればこれを修正できますか?
編集: ID は実際には追加の番号を取得する必要がありますが、カウンターの作成方法がわからないため、実装方法がわかりません。例えばnewbox1
jsfiddle の私のコード: http://jsfiddle.net/wowpatrick/qexRS/4/
最初にイベントハンドラを呼び出した時点では要素が存在しないため、イベントハンドラをライブでアタッチする必要があります。
新しく作成された各メモにイベントを添付できるようにするには、jQuery live()(注意: 非推奨のDocu ) または新しい jQuery バージョンon()( Docu ) を使用します。
また、ID は常に一意である必要があるため、無効なマークアップが生成されるため、ID を使用しないでください。代わりにクラスを使用してください。
.click新しい要素を作成した後で、新しい要素にハンドラを追加できます。
同じ ID を持つ複数の要素を作成しないでください。代わりにクラスを使用してください。
.draggable()また、をターゲットにする代わりに、作成した要素にすぐに をアタッチすることもできます$('#newbox')。
これがよりうまく機能するフォークです：http://jsfiddle.net/YvtLb/
鍵はここにあります：
var postit = $('<div class="ui-widget-content newbox" style="top:' + e.pageY + 'px; left: ' + e.pageX + 'px;"><span id="close">Delete comment</span><p>Your comment:</p><textarea></textarea></div>').draggable();
$('#canvas').append(postit);
これは、ページの読み込み#newboxが存在しないためです。より良い方法は、新しい要素を変数に格納し、追加してから適用しdraggable、これを試してください:
// Create the new comment at the corsor postition
var $newbox = $('<div class="ui-widget-content" id="newbox" style="top:' + e.pageY + 'px; left: ' + e.pageX + 'px;"><span id="close">Delete comment</span><p>Your comment:</p><textarea></textarea></div>');
$('#canvas').append($newbox);
$newbox.draggable();