19

私は動作する次のjQueryコードを持っていますが、追加したいものを指定する必要なしに、追加されているものに対して追加アクションを実行できるかどうかを考えさせられました。トリックはしませんでした。最初のアクションappend().append()の子ではなく、2つの要素を隣り合わせに配置しただけです。append()

作品：

var container = $('#container'),
    child = 'child';

$('#container').append($('<div/>',{
    'id'    : 'child'
}));

$('#' + child).append($('<a/>', {
    'class' : 'close',
    'href'  : 'javascript:;',
    html    : 'close',
    click   : function(e){
        e.preventDefault();
        $('#' + child).remove();
    }
}));

動作しません：

var container = $('#container'),
    child = 'child';

$('#container').append($('<div/>',{
    'id'    : 'child'
})).append($('<a/>', {
    'class' : 'close',
    'href'  : 'javascript:;',
    html    : 'close',
    click   : function(e){
        e.preventDefault();
        $('#' + child).remove();
    }
}));

http://jsfiddle.net/Y8TwW/1/

4

3 に答える 3

23

.appendTo()IDコンテナを持つ要素に最初のものを追加して<div>、その新しい要素への参照を取得してから、次を使用できます.append()。

$('<div/>',{
    'id'    : 'child'
}).appendTo('#container').append(
    $('<a/>', {
        'class' : 'close',
        'href'  : 'javascript:;',
        html    : 'close',
        click   : function(e){
            e.preventDefault();
            $('#' + child).remove();
        }
    })
);
于 2012-05-02T22:25:44.303 に答える
2

append追加されたコンテンツへの参照を返さないためです。つまりcontainer、最初の追加の後、または実行する追加の数に関係なく、同じオブジェクトを参照しています。したがって、他の提案された使用法として、appendToまたは失敗した理由をよりよく示す以下を使用できます。

var container = $('#container'),
child = 'child';

$('#container').append($('<div/>',{
    'id'    : 'child'
})).find('#' + child).append($('<a/>', {
    'class' : 'close',
    'href'  : 'javascript:;',
     html   : 'close',
     click  : function(e){
        e.preventDefault();
        $('#' + child).remove();
     }
}));​

フィドルhttp://jsfiddle.net/Y8TwW/3/

于 2012-05-02T22:55:37.370 に答える
1

私は appendto を使用してから http://jsfiddle.net/Y8TwW/2/を追加します

var container = $('#container'),
    child = 'child';
$('<div/>', { 'id': child }
 ).appendTo(container
 ).append($('<a/>', {
    'class' : 'close',
    'href'  : 'javascript:;',
    html    : 'close',
    click   : function(e){
        e.preventDefault();
        $('#' + child).remove();
    }
}));
于 2012-05-02T22:24:41.367 に答える