java - jQuery.toggle не работает после ajax

482

10 октября 2017, 02:36

Есть такой код:

$(document).ready(function() { 
    $('.hide').hide(); 
    $('#uf').css('color', 'rgb(0, 0, 0)'); 
    $('#pay').css('color', 'rgb(0, 0, 0)'); 
    $(document).on('change', '[data-toggle="toggle"]', function (event) { 
        event.preventDefault(); 
        $(this).parents().next('.hide').toggle(); 
 
        $('#uf, #pay').css('color', function(index, value){ 
            if(value === 'rgb(255, 255, 255)'){ 
                return 'rgb(0, 0, 0)'; 
            }else{ 
                return 'rgb(255, 255, 255)'; 
            } 
        }); 
    }); 
});

table {  
margin:50px auto; 
} 
th {  
background: white;  
color: black;  
font-weight: bold;  
text-align: center; 
padding: 10px;  
border: 1px solid #ccc;  
font-size: 18px; 
} 
 
td {  
padding: 10px;  
border: 1px solid #ccc;  
text-align: left;  
font-size: 18px; 
} 
.labels tr td { 
background-color: white; 
font-weight: bold; 
color: rgb(0, 0, 0); 
} 
.label tr td label { 
display: block; 
} 
[data-toggle="toggle"] { 
display: none; 
} 
 
.sum{ 
  text-align: center; 
} 
 
.details{ 
  text-align: center; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<table style='border-collapse: collapse;'> 
<thead> 
<tr> 
<th>Объект</th> 
<th id='uf'>Подобъект</th> 
<th id='pay'>Платёж</th> 
<th>Сумма</th> 
<th>Детали</th> 
</tr> 
</thead> 
 
<tbody class="labels"> 
<tr> 
<td>Чаплина</td> 
<td></td> 
<td></td> 
<td class='sum'>5000</td> 
  <td class='details'> 
<label for="чаплина">Показать</label> 
<input type="checkbox" id="чаплина" data-toggle="toggle" /> 
</td> 
</tr> 
</tbody> 
<tbody class="hide"> 
<tr> 
<td></td> 
<td>Гараж</td> 
<td></td> 
<td class='sum'>3000</td> 
<td></td> 
</tr> 
<tr> 
<td></td> 
<td>ЗОО</td> 
<td></td> 
<td class='sum'>2000</td> 
<td></td> 
</tr> 
</tbody> 
<tbody> 
<tbody class="labels"> 
<tr> 
<td>Энергетиков</td> 
<td></td> 
<td></td> 
<td class='sum'>5000</td> 
  <td class='details'> 
<label for="энергетиков">Показать</label> 
<input type="checkbox" name="энергетиков" id="энергетиков" data-toggle="toggle"> 
</td> 
</tr> 
</tbody> 
<tbody class="hide"> 
<tr> 
<td></td> 
<td>Гараж</td> 
<td></td> 
<td class='sum'>3000</td> 
<td></td> 
</tr> 
<tr> 
<td></td> 
<td>ЗОО</td> 
<td></td> 
<td class='sum'>2000</td> 
<td></td> 
</tr> 
</tbody> 
</table>

После Ajax запроса не срабатывает toggle(). Если поставить туда removeClass('hide'), тогда отрабатывает. Как починить? Ниже ajax, который возвращает таблицу:

function showPaysMonths(facility) {
    var token = $("meta[name='_csrf']").attr("content");
    var header = $("meta[name='_csrf_header']").attr("content");
    var search = ({"facility" : facility});
    $.ajax({
        type : "POST",
        contentType : "application/json;charset=utf-8",
        url : "goPays",
        data : JSON.stringify(search),
        dataType : 'json',
        timeout : 100000,
        beforeSend: function(xhr){
            xhr.setRequestHeader(header, token);
        },
        success : function(data) {
            show(data);
        },
        error : function(e) {
            show(e);
        }
    });
}
function show(data) {
    var json = JSON.stringify(data);
    $('#cash-details').html(json);
}

Answer 1

Не очень понял почему так, но исправил следующим образом: Изменил название класса с hide на hideShow. В CSS добавил:

.hideShow{
  display: none;
}

Итоговый вариант ниже:

$(document).ready(function() { 
    $('.hideShow').hide(); 
    $('#uf').css('color', 'rgb(0, 0, 0)'); 
    $('#pay').css('color', 'rgb(0, 0, 0)'); 
    $(document).on('change', '[data-toggle="toggle"]', function (event) { 
        event.preventDefault(); 
        $(this).parents().next('.hideShow').toggle(); 
 
        $('#uf, #pay').css('color', function(index, value){ 
            if(value === 'rgb(255, 255, 255)'){ 
                return 'rgb(0, 0, 0)'; 
            }else{ 
                return 'rgb(255, 255, 255)'; 
            } 
        }); 
    }); 
});

th { 
    background: white; 
    color: black; 
    font-weight: bold; 
    text-align: center; 
    padding: 10px; 
    border: 1px solid #ccc; 
    font-size: 18px; 
} 
 
td { 
    padding: 10px; 
    border: 1px solid #ccc; 
    text-align: left; 
    font-size: 18px; 
} 
.labels tr td { 
    background-color: white; 
    font-weight: bold; 
    color: rgb(0, 0, 0); 
} 
.label tr td label { 
    display: block; 
} 
[data-toggle="toggle"] { 
    display: none; 
} 
 
.hideShow{ 
    display: none; 
} 
 
.sum{ 
    text-align: center; 
} 
 
.details{ 
    text-align: center; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<table style='border-collapse: collapse;'> 
<thead> 
<tr> 
<th>Объект</th> 
<th id='uf'>Подобъект</th> 
<th id='pay'>Платёж</th> 
<th>Сумма</th> 
<th>Детали</th> 
</tr> 
</thead> 
 
<tbody class="labels"> 
<tr> 
<td>Чаплина</td> 
<td></td> 
<td></td> 
<td class='sum'>5000</td> 
  <td class='details'> 
<label for="чаплина">Показать</label> 
<input type="checkbox" id="чаплина" data-toggle="toggle" /> 
</td> 
</tr> 
</tbody> 
<tbody class="hideShow"> 
<tr> 
<td></td> 
<td>Гараж</td> 
<td></td> 
<td class='sum'>3000</td> 
<td></td> 
</tr> 
<tr> 
<td></td> 
<td>ЗОО</td> 
<td></td> 
<td class='sum'>2000</td> 
<td></td> 
</tr> 
</tbody> 
<tbody> 
<tbody class="labels"> 
<tr> 
<td>Энергетиков</td> 
<td></td> 
<td></td> 
<td class='sum'>5000</td> 
  <td class='details'> 
<label for="энергетиков">Показать</label> 
<input type="checkbox" name="энергетиков" id="энергетиков" data-toggle="toggle"> 
</td> 
</tr> 
</tbody> 
<tbody class="hideShow"> 
<tr> 
<td></td> 
<td>Гараж</td> 
<td></td> 
<td class='sum'>3000</td> 
<td></td> 
</tr> 
<tr> 
<td></td> 
<td>ЗОО</td> 
<td></td> 
<td class='sum'>2000</td> 
<td></td> 
</tr> 
</tbody> 
</table>

Создание интернет-магазина игрушек в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

21:33

Виртуальный выделенный сервер (VDS) становится отличным выбором
22:26
22:40

Создание игр для детей: первые шаги в IT мире
08:34
15:01

Основные задачи SEO оптимизатора
17:01
11:24

Выделенный сервер для игр: преимущества и недостатки
10:16
17:54

Все вопросы

ТОП-10

Все популярные вопросы

Автодополнение в Netbeans

Очень понравилось автодополнение в Inteliji Idea, но пересел работать за NetBeans и очень огорчён тем, что там автодополнение хуже, чем в IntelijiСуществует...

232

Java