Próbuję wykonać formularz internetowy, który ma możliwość dodania i wyjmowania nowego elementu. Mogę dostać tę pracę jako przyciski poza źródłem lub klonowane elementy, ale mam problem z przyciskiem "Usuń", aby pracować w sklonowanym elemencie.

Kod HTML to:

<table>
    <tr><td class="associate_column_left">
        Bursary award rates:</td><td class="associate_column_right">
        <div class="clone">£ <input type="text" name="AMOUNT" value="100" class="cl"><a href="#" class="remove_trigger">Delete amount</a></div>
        <div class="placer"></div>
        <p><a href="#" class="clone_trigger">Add another bursary award amount</a> &nbsp; <a href="#" class="remove_trigger">Remove last bursary award amount</a></p>
    </td></tr>
</table>

A obecne jQuery to:

// Start code for duplicating a div box
$(document).ready(function(){
    $(".clone_trigger").click(function () {
        $('.clone').first().clone().insertBefore(".placer");
        $('input.cl:last').val('');
        event.preventDefault();
    });
});
// End code for duplicating a div box

// Start code for removing an already duplicated div box
$(document).ready(function(){
    $(".remove_trigger").click(function () {
        if ($(".clone").length != 1) {
            $(".clone:last").remove();
        }
        //$('.clone:last').not('.clone:first').remove();
        event.preventDefault();
    });
});
// End code for removing an already duplicated div box

Jest to pracujący JFiddle w http://jsfiddle.net/dalepotter/Frr88/1/

The

Coś wydaje się być błędne ... jeśli ktoś ma jakieś rady, daj mi znać - to doprowadza mnie do nieco szalonego!

Wielkie dzięki za każdą godzinę, którą możesz dać ...

2
user2761030 2 grudzień 2013, 16:55

3 odpowiedzi

Najlepsza odpowiedź

Problem polega na tym, że elementy

$(".remove_trigger").click(function () {

Do tego

$("table").on("click", ".remove_trigger", function () {
5
Esko 2 grudzień 2013, 12:58

To zrobi to, co chcesz, a uniemożliwi Ci również usunięcie pierwszego pola wprowadzania przez nieczyste. Problem polegał na tym, że wydarzenie Click jest ustawione tylko na doktorze, a następnie klony nie są jeszcze inicjowane.

BTW: Musisz naprawić Usuń Handler, jeśli chcesz ponownie usunąć pierwszy wiersz ...

// Start code for duplicating a div box
$(document).ready(function(){
    $(".clone_trigger").on("click",function () {
        var cloneElem = $('.default').clone().attr("class", "clone");
        cloneElem.find(".remove_trigger").on("click", function() {
            $(this).parent().remove();
        });
        cloneElem.insertBefore(".placer");
        $('input.cl:last').val('');
        event.preventDefault();
    });

    $(".remove_trigger").on("click", function () {
        $(".clone:last").remove();
        event.preventDefault();
    });
});
// End code for removing an already duplicated div box
0
KungWaz 2 grudzień 2013, 13:11

Posługiwać się:

$(".remove_trigger").live('click', function () {

W twojej wersji jQuery LIVE działa drobno. http://jsfiddle.net/xgjky/

1
Chalist 2 grudzień 2013, 13:17