Почему я модальный оно не функционирует?

Создав кнопку, которую называл бы модальный, функционируй правильно:

<a class="waves-effect waves-light btn modal-trigger" href="#modal">Modal</a>

Но произведя элемент с jquery, модальный прекращает функционировать

$.ajax({
        url: route,
        headers: {'X-CSRF-TOKEN': token},
        type: 'GET',
        dataType: 'json',
        success: function(usuariosReq){
            $(usuariosReq).each(function(key, value){
                tablaDatos.append("<tr><th>"+value.id+"</th><td>"+value.nombre+"</td><td>"+value.apellido+"</td><td>"+value.correo+"</td><td><div class='btn-group'><a class='btn btn-small btn-rounded waves-effect waves-light btn modal-trigger' data-target='#modal'><i class='fa fa-eye'></i>  Ver</a><a href='{{URL::route('usuario.edit', "+value.id+")}}' class='btn btn-small btn-rounded green'><i class='fa fa-pencil'></i>  Editar</a><a class='btn btn-small btn-rounded red' onclick='eliminar("+value.id+")'><i class='fa fa-trash'></i>  Eliminar</a></div></td></tr>");
            });
        }
    });
0
задан 29.03.2016, 18:49
2 ответа

Займи делегацию событий через .on() вместо того, чтобы использовать датируй attributes для этих созданных ссылок dinamicamente. Например, если у тебя есть один table как elemente установленный и одинокий ты вводишь ему элементы tr ты должен делать bind события click через table. Таким образом элемент table.

Давайте предполагать, что в ссылку мы помещаем ему класс .trigger-edit-modal и table обладай id users-table, тогда оно было бы нечто похожим:

$('#users-table').on('click', '.trigger-edit-modal', function (event) {
    event.preventDefault();
    var $this = $(this);
    var modalId = $this.attr('href'); // o $this.data('target');

    $(modalId).modal('show');
});

Это кроме того увеличит результат, так как только будет существовать единственный handler для этого события ;). В документации есть больше info на делегации событий, jQuery api: .on ()

Привет.

1
ответ дан 24.11.2019, 14:41

В teorГ - в deberГ, - чтобы функционировать asГ -

$.ajax({
    url: route,
    headers: {'X-CSRF-TOKEN': token},
    type: "GET",
    success: function(usuariosReq) {
        $.each(usuariosReq, function (key, value) {
            tablaDatos.append("<tr><th>"+value.id+"</th><td>"+value.nombre+"</td><td>"+value.apellido+"</td><td>"+value.correo+"</td><td><div class='btn-group'><a class='btn btn-small btn-rounded waves-effect waves-light btn modal-trigger' data-target='#modal'><i class='fa fa-eye'></i>  Ver</a><a href='{{URL::route('usuario.edit', "+value.id+")}}' class='btn btn-small btn-rounded green'><i class='fa fa-pencil'></i>  Editar</a><a class='btn btn-small btn-rounded red' onclick='eliminar("+value.id+")'><i class='fa fa-trash'></i>  Eliminar</a></div></td></tr>");
        });
        $("#id_modal_markup").modal('show');
    }
});

SerГ - В хороший видеть html как эта построенный модальный. TambiГ©n podrГ, - чтобы давать, что модальный явился до того, как html закончил строиться asГ - что podrГ - использовать обещания

0
ответ дан 24.11.2019, 14:41