1

div を動的に追加/削除したい。このコードで追加ボタンを機能させることができました：

$('#addSelector').live('click', function() {
$('<div id=' + c + ' class="title">...<input type="button" id="remSelector'+ c +'" value="Remove Selector"></div>').appendTo(addDivSelector);
c++;

したがって、基本的に削除ボタンを追加し、そのdivを削除したい（たとえば、remSelector5はid 5のdivを削除します.

このコードで私が抱えている別の問題: このコードで入力フィールドを動的に追加/削除することができました:

var i = $('#addinput p').size() + 1;
var addDiv = $('#addinput');
$('#addNew').live('click', function() {
$('<p> ... <input type="text" name="value' + i + '" placeholder="Value"/>&nbsp <input type="button" id="remNew" value="Remove Operator"/></p>').appendTo(addDiv);
i++;

この投稿の最初のコードは、2 番目のコードを生成します (var 宣言を除く)。たとえば、2 番目または 3 番目の div で ID「addNew」のボタンを押すと、最初の div に新しいフィールドが生成されます。同じ div に新しい入力フィールドを生成したいのですが、うまくいきません。

4

3 に答える 3

0

最初の問題を解決する方法は次のとおりです。

$('#addSelector').live('click', function() {
    $('<div id=' + c + ' class="title">...<input type="button" class="removeButton" id="remSelector'+ c +'" value="Remove Selector"></div>').appendTo(addDivSelector);
    c++;
});

addDivSelector.find("input.removeButton").live("click", function () {
    $(this).parent().remove();
});

これには、addDivSelector が jQuery オブジェクトである必要があります。

于 2013-06-28T12:21:11.163 に答える
0

私が理解しているように、あなたはこのようなものを見たいと思っています:

$('.add-row').click(function() {
    var input = $('<input type="text" />');
    var btn = $('<input type="button" value="x" />');

    btn.click(function() {
        $(this).parent().remove();
    });

    var div = $('<div />');
    div.append(input).append(btn);    

    $('.container').append(div);
});

http://jsfiddle.net/inser/LHjx4/

于 2013-06-28T12:26:17.103 に答える
0

あなたのニーズをほとんど理解していませんが、それが私が提供できるものです:

    var id = 0,
    textId = 0;

$("#magicButton").on("click", function () {
    id++;
    var content = 
        '<div id="someDiv_' + id + '" class="title">' +
    '<input type="button" data-id="' + id + '" value="remove" class="removeButton"/>' +
    '<input type="button" data-id="' + id + '" value="addText" class="addText"/>' + 
    '</div>';
    $("#someContainer").append(content);
    //bind event handlers:
    $(".removeButton").off("click").on("click", removeDiv);
    $(".addText").off("click").on("click", addText);

});

function removeDiv() {
    var id = $(this).data("id");
    $("#someDiv_" + id).remove();
}

function addText() {
    textId++;
    var id = $(this).data("id");
    var content = '<div id="txtContainer_' + textId + '"><input type="text" value="some text"/><input type="button" value="X" data-textid="' + textId + '" class="removeText"/></div>';
    $("#someDiv_" + id).append(content);
    $(".removeText").off("click").on("click", removeText);
}

function removeText() {
    var textId = $(this).data("textid");
    $("#txtContainer_" + textId).remove();
}

JSFiddleで確認してください

その codez は実際に、ページ上の動的要素を操作する方法と.live()、使用するのに適していない要素を取り除く方法を示しています。

于 2013-06-28T12:34:14.337 に答える