0

jqueryクリックイベントに問題があります。これが私のアプリの機能です。ユーザーはテキストフィールドに名前を入力します。彼が追加ボタンをクリックすると、その名前がコンテンツのdivタグに表示されます。この名前には削除ボタンもあります。ここで問題となるのは、ユーザーが削除ボタンをクリックしても応答がないことです。では、どうすればこれを機能させることができますか？

これが私のコードです

HTML：

<div class="container">
    <label>Name</label>
    <input type="text" class="name" name="name" />
    <input type="button" class="addBtn" name="add" value="Add" />
</div>
<div class="contents"></div>

jQuery：

$('.addBtn').click(function() {
    var name = $('.name').val();
    var contents = $('.contents');
    var div = $('<div class="names"></div>');
    div.append(name);
    div.append("<button class='delete'>X</button>");
    contents.append(div);
    $('.name').val('');
});

$('.delete').click(function() {
    console.log('click');
});
4

4 に答える 4

3

これを行うより良い方法は、次のon()関数を使用することです。

$('.addBtn').on('click', function() {
    var name = $('.name').val();
    var contents = $('.contents');
    var div = $('<div class="names"></div>');
    div.append(name).append("<button class='delete'>X</button>");
    contents.append(div);
    $('.name').val('');
});

$(document).on('click', '.delete', function() {
    console.log('click');
});​

デモ: http://jsfiddle.net/tSTEK/7/

于 2012-08-05T09:50:24.430 に答える
0

要素を作成するときにクリックイベントを追加できます。

 div.append("<button class='delete'>X</button>")
            .click(function(){
                console.log('click');
            });

更新されたフィドル

または、.live（）または.on（）を使用することもできます（jQueryのバージョンによって異なります）。

$('.delete').live('click', function() {
    console.log('click');
});​

$(document).on('click', '.delete', function() {
    console.log('click');
});​
于 2012-08-05T09:46:02.357 に答える
-2

Jquery live メソッドを使用して、親要素を削除するだけです。 

$('.delete').on('click', function() {
    $(this).parent().remove();
});​

フィドルは次のとおりです。

http://jsfiddle.net/tSTEK/9/

于 2012-08-05T09:49:58.410 に答える