4

簡単なjQueryの質問があります：

まず、私のHTML：

<div id="taskinput">
    <form>
         <input id="taskinput-box" type="text"></input>
         <input type="submit"></input>
    </form>
</div><!-- end taskinput -->
<div id="taskoutput"></div><!-- end taskoutput -->

新しいクラス .task を作成しながら、.append を使用してユーザーから #taskoutput にコンテンツを作成しています。

$("#taskinput").submit(function() {
    var tasktext = $('#taskinput-box').val()
    $('#taskoutput').append('<div class="task">'+tasktext+'</div>');
    $('#taskinput-box').val("");
    return false;
});

上記のコードは問題なく動作します。作成したdivを選択しようとすると問題が発生します。以下のコードは機能しません。

$(".task").click(function() {
    $(this).slideUp();
});

私は何が欠けていますか？

4

4 に答える 4

2

delegate event次のようなものを使用する必要がありますon。

$('#taskoutput').on('click', '.task', function(){
    $(this).slideUp();    
});

@salek DEMOしかしon

onドキュメントを読む：

イベント ハンドラーは、現在選択されている要素にのみバインドされます。これらは、コードが .on() を呼び出す時点でページに存在している必要があります。要素が存在し、選択できることを確認するには、ページの HTML マークアップにある要素のドキュメント対応ハンドラー内でイベント バインディングを実行します。新しい HTML がページに挿入されている場合は、要素を選択し、新しい HTML がページに配置された後にイベント ハンドラーを添付します。または、次に説明するように、委任されたイベントを使用してイベント ハンドラーをアタッチします。

委任されたイベントには、後でドキュメントに追加される子孫要素からのイベントを処理できるという利点があります。委任されたイベント ハンドラーがアタッチされた時点で存在することが保証されている要素を選択することで、委任されたイベントを使用して、イベント ハンドラーを頻繁にアタッチおよび削除する必要がなくなります。この要素は、Model-View-Controller デザインのビューのコンテナー要素、またはイベント ハンドラーがドキュメント内のすべてのバブリング イベントを監視する必要がある場合はドキュメントのコンテナー要素である可能性があります。document 要素は、他の HTML をロードする前にドキュメントの head で使用できるため、ドキュメントの準備が整うのを待たずに安全にイベントをアタッチできます。

于 2012-05-23T00:48:08.290 に答える
2

$(".task").click(...「現在存在するすべての要素を見つけて、.taskそれらにイベントハンドラーをバインドします。例のように要素が後で作成された場合、イベントハンドラーはバインドされません。

常に存在する要素にイベント ハンドラーをバインドする必要があります。祖先要素にはその子孫のイベントが通知されるため、要素をクリックすると常に のハンドラ.taskがトリガーされます。jQuery のメソッドを使用すると、これが簡単になります。click#taskoutputon

$('#taskoutput').on('click', '.task', function(){
    $(this).slideUp();    
});
于 2012-05-23T00:50:23.970 に答える
0

使用する必要があるのは live('click', function() { ...

http://jsfiddle.net/2ZmF4/で jsfiddle を作成しました。 

$(".task").die().live('click', function() {
    $(this).slideUp();
    return false;
});​

シナリオに応じて、死の呼び出しが必要かどうかを判断する必要があります...とにかくそこに投げました...

于 2012-05-23T00:55:48.750 に答える
0

jquery.on()を使用して、実行時に生成される HTML にイベントをバインドします。このような：

$("#taskoutput").on({
    click: function() { $(this).slideUp(); }
}, '.task');
于 2012-05-23T00:47:47.213 に答える