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++;

这篇文章的第一个代码生成第二个代码（var 声明除外）。例如，当我在第二个或第三个 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 回答