类上的jQuery click事件只触发第一个元素

Question

只有第一个元素（第一个按钮）才能从类中获取remove事件＆＃34; remove-row＆＃34;

我的HTML：

<button type="button" class="draggable-button">
    <div>Some value<input type="hidden" name="row[][key1]"></div>
    <div data-value="1">Some value<input type="hidden" name="row[][key2]"></div>
    <div data-value="1">Some value<input type="hidden" name="row[][key3]"></div>
    <div data-value="1">Some value<input type="hidden" name="row[][key4]"></div>
    <div class="edit-row">Edit</div>
    <div class="remove-row">X</div>
</button>
<button type="button" class="draggable-button">
    <div>Some value<input type="hidden" name="row[][key1]"></div>
    <div data-value="1">Some value<input type="hidden" name="row[][key2]"></div>
    <div data-value="1">Some value<input type="hidden" name="row[][key3]"></div>
    <div data-value="1">Some value<input type="hidden" name="row[][key4]"></div>
    <div class="edit-row">Edit</div>
    <div class="remove-row">X</div>
</button>

我的JavaScript / jQuery：

$(document).ready(function () {
    // Remove row
    $('.remove-row').on('click', function () {
        $(this).parent().remove();
    });
});

我希望它没有重复，因为我尝试了https://github.com/andreiz/php-zookeeper和其他一些问题，但没有成功。

Answer 1

$(document).ready(function () {
    $('.remove-row').each(function(index) {
      $(this).on('click', function () {
        $(this).parent().remove();
      });
    });
});

会这样做，请参阅此Plunk。请注意，您必须完全单击X的（行）才能使其正常工作。

Answer 2

＆＃13;

＆＃13;

$(function () {
  $(document).ready(function () {
    // Remove row
    $('.remove-row').on('click', function () {
        $(this).parent().remove();
    });
  });
  
    $('.draggable-button').mousedown(function (e) {
        if (e.which === 1) {
            var button = $(this);
            var button_id = button.attr('id');
            var parent_height = button.parent().innerHeight();
            var top = parseInt(button.css('top'));
            var original_ypos = button.position().top; //original ypos
            var drag_min_ypos = 0 - original_ypos;
            var drag_max_ypos = parent_height - original_ypos - button.outerHeight();
            var drag_start_ypos = e.clientY;
            var my_ypos = original_ypos;

            //Set current order for all
            $('.draggable-button').each(function (i) {
                $(this).attr('data-order', (i + 1));
            });
            var prev_button = button.prev('.draggable-button');
            var next_button = button.next('.draggable-button');
            var prev_button_ypos = prev_button.length > 0 ? prev_button.position().top : '';
            var next_button_ypos = next_button.length > 0 ? next_button.position().top : '';
            $(window).on('mousemove', function (e) {
                //Move and constrain
                button.addClass('drag');
                var direction = my_ypos > button.position().top ? 'up' : 'down';
                var new_top = top + (e.clientY - drag_start_ypos);
                my_ypos = button.position().top;
                button.css({top: new_top + 'px'});
                if (new_top < drag_min_ypos) {
                    button.css({top: drag_min_ypos + 'px'});
                }
                if (new_top > drag_max_ypos) {
                    button.css({top: drag_max_ypos + 'px'});
                }
                //Check position over others
                if (direction == 'down' && next_button_ypos != '') {
                    if (my_ypos > next_button_ypos) { //crossed next button
                        next_button.css({top: (parseInt(next_button.css('top')) - next_button.outerHeight(true)) + 'px'}); //up once
                        var tmp_order = next_button.attr('data-order');
                        next_button.attr('data-order', button.attr('data-order')); //switch order
                        button.attr('data-order', tmp_order);
                        prev_button = next_button;
                        next_button = next_button.nextAll('.draggable-button:not(.drag)').first();
                        prev_button_ypos = prev_button.length > 0 ? prev_button.position().top : '';
                        next_button_ypos = next_button.length > 0 ? next_button.position().top : '';
                    }
                } else if (direction == 'up' && prev_button_ypos != '') {
                    if (my_ypos < prev_button_ypos) { //crossed prev button
                        prev_button.css({top: (parseInt(prev_button.css('top')) + prev_button.outerHeight(true)) + 'px'}); //down once
                        var tmp_order = prev_button.attr('data-order');
                        prev_button.attr('data-order', button.attr('data-order')); //switch order
                        button.attr('data-order', tmp_order);
                        next_button = prev_button;
                        prev_button = prev_button.prevAll('.draggable-button:not(.drag)').first();
                        prev_button_ypos = prev_button.length > 0 ? prev_button.position().top : '';
                        next_button_ypos = next_button.length > 0 ? next_button.position().top : '';
                    }
                }
            });
            $(window).on('mouseup', function (e) {
                if (e.which === 1) {
                    $('.draggable-button').removeClass('drag');
                    $(window).off('mouseup mousemove');
                    //Reorder and reposition all
                    $('.draggable-button').each(function () {
                        var this_order = parseInt($(this).attr('data-order'));
                        var prev_order = $(this).siblings('.draggable-button[data-order="' + (this_order - 1) + '"]');
                        if (prev_order.length > 0) {
                            $(this).insertAfter(prev_order);
                        }
                    });
                    $('.draggable-button').css('top', '0');
                    $('.draggable-button').removeAttr('data-order'); //reset
                }
            });
        }
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button type="button" class="draggable-button">
    <div>Some value<input type="hidden" name="row[][key1]"></div>
    <div data-value="1">Some value<input type="hidden" name="row[][key2]"></div>
    <div data-value="1">Some value<input type="hidden" name="row[][key3]"></div>
    <div data-value="1">Some value<input type="hidden" name="row[][key4]"></div>
    <div class="edit-row">Edit</div>
    <div class="remove-row">X</div>
</button>
<button type="button" class="draggable-button">
    <div>Some value<input type="hidden" name="row[][key1]"></div>
    <div data-value="1">Some value<input type="hidden" name="row[][key2]"></div>
    <div data-value="1">Some value<input type="hidden" name="row[][key3]"></div>
    <div data-value="1">Some value<input type="hidden" name="row[][key4]"></div>
    <div class="edit-row">Edit</div>
    <div class="remove-row">X</div>
</button>

＆＃13;

＆＃13;

＆＃13;

我发布的代码中没有问题。我忘了提到我使按钮可拖动了。为此，我使用了一个插件，它以某种方式阻止了点击。

现在调试并尝试修复它，感谢您的帮助！

Answer 3

请像这样使用：

$(document).ready(function () {
// Remove row
$('.remove-row').on('click', function () {
    $('.remove-row').parent().remove();
});
});