jquery динамически перемещает строки с помощью .on

Question

jquery динамически перемещает строки с помощью .on

0

Я пытаюсь переместить строки между двумя таблицами, но я не могу заставить его привязать событие клика к нему. Я запутался в селекторной части на .on событии. Я не уверен, на что я должен быть нацелен.

В основном я могу заставить его переместиться на один стол и обратно, но потом он потеряет свойство click. Не знаю, почему.

Я прикрепил скрипку (http://jsfiddle.net/Yjqkn/216/), чтобы сделать проблему более ясной. Кнопка одобрения перемещает ее вниз, а кнопка списка ожидания перемещает ее назад, но затем она теряет всех прослушивателей событий, нужно ли их переинсталлировать с помощью .bind Каков наилучший способ решить эту проблему.

Я попробовал: .on("click","button.remove-participant",function() не работала

Javascript

$( ":button" ).on("click",function(){

    if($(this).hasClass('remove-participant')) {
        $(this).removeClass('remove-participant').addClass('add-participant');
        $(this).html('Approve');
        var current_row = $(this).closest('tr').html();

        $('.table_2 > tbody:last').append('<tr>'+current_row+'</tr>');
        $(this).closest('tr').remove();

        $( ".table_2 .add-participant" ).bind( "click", function() {
            $(this).removeClass('add-participant').addClass('remove-participant');
            var current_row = $(this).closest('tr').html();
            $(this).html('Waitlist');

            $('.table_1 > tbody:last').append('<tr>'+current_row+'</tr>');
            $(this).closest('tr').remove();
        });
    }
});

HTML

<table class="table_1">
  <tr>
    <th>Info Header 1</th><th>Info Header 2</th>
  </tr>
  <tbody>
    <tr><td>Don</td>
      <td><button class="remove-participant" name="">Remove</button></td>
    </tr>
  </tbody>
</table>
<table class="table_2">
  <tr>
    <th>Info Header 1</th><th>Info Header 2</th>
  </tr>
  <tbody>
    <tr></tr>
  </tbody>
</table>

Undermine2k 19 сен. 2013, в 02:53

Источник

Теги:

javascript

jquery

html

2 ответа

-1

По-моему, ваш код не работает из-за вашей логики. Вы здесь делаете это: в таблице 1 вы удаляете класс. $ (Это).removeClass( 'удалить-участник') addClass ( 'надстройку участника.');

Когда вы нажимаете на таблицу 2 и делаете то же самое. Но вы никогда не возвращаетесь назад и не добавляете класс remove-участника в таблицу 1. Таким образом, щелчок в таблице 1 не работает, потому что класс установлен на "добавочный участник" и не возвращается обратно.

poodle 18 сен. 2013, в 23:00

0

Его код table_2 противоположные изменения в классы, поэтому я думаю, что по сути он делает правильные вещи.
Barmar 19 сен. 2013, в 01:03

Ещё вопросы

Его код table_2 противоположные изменения в классы, поэтому я думаю, что по сути он делает правильные вещи.

Barmar · Accepted Answer · 2013-09-18T21-58-00.000Z

Вы должны использовать:

$(".table_1").on("click", "button.remove_participant", function() {
    ...
});

Общая идея с делегированием событий заключается в том, что вы привязываете обработчик к некоторым элементам, статическим в DOM и содержащим все динамически добавленные элементы. Затем аргумент селектора должен указывать более конкретные динамические элементы, которым вы хотите делегировать.

Он также не выглядит правильно, что вы связываете click обработчик .table_2.add_participant в button.remove_participant обработчик щелчка. Каждый раз, когда вы удаляете участника, он собирается добавить еще один обработчик кликов для каждого элемента .add_participant, поэтому, когда вы нажимаете на эти элементы, обработчик будет запускаться несколько раз. Вы должны делегировать обработчик только один раз - вся точка делегирования заключается в том, что она поднимает динамические изменения, поэтому вам не нужно повторять ее при каждом изменении DOM.

КСТАТИ,

.removeClass('class1').addClass('class2');

могут быть объединены в:

toggleClass('class1 class2');

Я верю, что вы правы, все по пунктам спасибо, я попробую это без связи.