0

私のjQueryには、削除ボタンを作成するために使用されるボタンがあります:

$("#add").click(function() {
    var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>");
    var removeButton = $("<input type=\"button\" id=\"remove\" class=\"btn\" value=\"Remove\" />");
    removeButton.click(function() {
        $(this).parent().remove();
    });

    fieldWrapper.append(removeButton);
});

ただし、jQuery の代わりに PHP を使用して手動で削除ボタンを追加すると、

<div class='fieldwrapper' id=<? echo "field".$counter ?>
    <input type='button' id='remove' class='btn' value='Remove'>
</div>

fieldwrapperidがオーバーラップしていないことを確認したのに、なぜ機能しないのですか? ありがとうございました。

更新しました：

$(document).ready(function() {
    $("#config").validate();

    $('#id').click(function() {
        $(this).parent().remove();
    });

    $("#add").click(function() {
        var intId = $("#configField div").length + 1;
        var label = $("<label>Field Name:</label>");
        var labelType = $("<label>Field Type:</label>");
        var labelReq = $("<label>Require:</label>");
        var labelTag = $("<label>Tag:</label>");
        var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>");
        var fName = $("<input type=\"text\" name=\"Name" + intId + "\" class=\"required\" />");
        var fTag = $("<input type=\"text\" name=\"Tag" + intId + "\" class=\"required\" />");
        var fReq = $("<select  class=\"required\" name=\"Req" + intId + "\" ><option selected=\"\" value=\"\">Please Select</option><option value=\"1\">Yes</option><option value=\"0\">No</option></select>");
        var fType = $("<select  class=\"required\" name=\"Type" + intId + "\"  ><option selected=\"\" value=\"\">Please Select</option><option value=\"txt\">Text</option><option value=\"int\">Numbers</option><option value=\"bool\">Boolean</option></select>");
        var removeButton = $("<input type=\"button\" id=\"remove\" class=\"btn remove\" value=\"Remove\" />");

        fieldWrapper.append('<br>');
        fieldWrapper.append(label);
        fieldWrapper.append(fName);
        fieldWrapper.append('<br>');
        fieldWrapper.append(labelType);
        fieldWrapper.append(fType);
        fieldWrapper.append('<br>');
        fieldWrapper.append(labelReq);
        fieldWrapper.append(fReq);
        fieldWrapper.append('<br>');
        fieldWrapper.append(labelTag);
        fieldWrapper.append(fTag);
        fieldWrapper.append('<br>');
        fieldWrapper.append(removeButton);
        $("#configField").append(fieldWrapper);
    });

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

PHP:

<div class='fieldwrapper' id=<? echo "field".$counter ?>
    <input type='button' id='remove' class='btn remove' value='Remove'>
</div>
4

1 に答える 1

1

「#add」をクリックした後、削除ボタン機能を開始するだけです。内部関数とは別に宣言し、「delegate('click',」を指定することで、すべての .remove 要素が常にその親を削除するようになります。

$("#add").click(function() {

    var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>");
    var removeButton = $("<input type=\"button\" id=\"remove\" class=\"btn remove\" value=\"Remove\" />");

    fieldWrapper.append(removeButton);
});


$('.remove').delegate('click', function() {
    $(this).parent().remove();
});
于 2012-05-07T02:14:24.157 に答える