Page reloading when using .click Jquery

0

I have a view that when clicking a button opens a modal and clicking the modal button inserts a row into a table and is working correctly. In this included line it has a <a class="btn-remove-row" href=""><i class="mdi mdi-close-circle font-18 text-danger"></i></a> that when clicking would have to remove the line, but instead the page is reloaded.

@extends('layouts.app')
@section('title', 'Incluir Orçamento')
@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="card-box">
            <ul class="nav nav-tabs tabs-bordered">
                <li class="nav-item">
                    <a href="#zone-b1" data-toggle="tab" aria-expanded="true" class="nav-link active">
                        <i class="fi-paper mr-2"></i>Dados do Orçamento
                    </a>
                </li>
            </ul>
            <form method="POST" action="{{ route('orders.store') }}">
                @csrf
                @include('alerts.error-message')
                <div class="tab-content">
                    <div class="tab-pane show active" id="zone-b1">
                        <div class="row">
                            <div class="col-lg-4">
                                <div class="form-group mt-3">
                                    <label>Imóvel
                                        <span class="text-danger">*</span>
                                    </label>
                                    <select class="form-control" name="property_id">
                                        <option value="">Selecione</option>
                                        <option></option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-group mt-3">
                                    <label>Cabeçalho
                                        <span class="text-danger">*</span>
                                    </label>
                                    <select class="form-control" name="property_id">
                                        <option value="">Selecione</option>
                                        <option></option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-group mt-3">
                                    <label>Rodapé
                                        <span class="text-danger">*</span>
                                    </label>
                                    <select class="form-control" name="property_id">
                                        <option value="">Selecione</option>
                                        <option></option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="form-group mt-3">
                                    <label>Apresentação
                                        <span class="text-danger">*</span>
                                    </label>
                                    <textarea id="elm1" name="presentation"></textarea>
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="form-group mt-3 table-responsive">
                                    <label>Serviços
                                        <span class="text-danger">*</span>
                                    </label>
                                    <div class="col-12 mb-3 pl-0">
                                        <a href="#" data-toggle="modal" data-target="#myModal"
                                           class="btn btn-custom waves-light waves-effect">Incluir Serviço</a>
                                    </div>
                                    <table class="table">
                                        <thead>
                                        <tr>
                                            <th>Serviço</th>
                                            <th>Descrição</th>
                                            <th>Valor</th>
                                            <th>Excluir</th>
                                        </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-group mt-3">
                                    <label>Forma de Pagamento
                                        <span class="text-danger">*</span>
                                    </label>
                                    <select class="form-control" name="payment_method">
                                        <option value="">Selecione</option>
                                        <option value="1">À vista</option>
                                        <option value="2">Entrada + 30 dias</option>
                                        <option value="3">Entrada + 30 + 60 dias</option>
                                        <option value="4">Entrada + 30 + 60 + 90 dias</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-group mt-3">
                                    <label>Valor
                                        <span class="text-danger">*</span>
                                    </label>
                                    <input class="form-control" type="text" name="price">
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-group mt-3">
                                    <label>Validade do Orçamento
                                        <span class="text-danger">*</span>
                                    </label>
                                    <input class="form-control" type="date" name="price">
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="form-group mt-3">
                                    <label>Considerações Importantes
                                        <span class="text-danger">*</span>
                                    </label>
                                    <textarea id="elm1" name="comments"></textarea>
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="form-group text-right m-b-0">
                                    <button class="btn btn-custom waves-effect waves-light" type="submit">
                                        Salvar
                                    </button>
                                    <a href="{{ route('orders.index') }}"
                                       class="btn btn-light waves-effect m-l-5">
                                        Voltar
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<!--Modal-->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">Incluir Serviço</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="service-modal">Serviço
                        <span class="text-danger">*</span>
                    </label>
                    <select class="form-control" id="service-modal" name="service-modal">
                        <option value="">Selecione</option>
                        <option value="1">Serviço 1</option>
                        <option value="1">Serviço 2</option>
                        <option value="1">Serviço 3</option>
                        <option value="1">Serviço 4</option>
                    </select>
                </div>
                <div class="form-group mt-3">
                    <label for="price-modal">Valor
                        <span class="text-danger">*</span>
                    </label>
                    <input class="form-control" type="text" id="price-modal" name="price-modal">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light waves-effect" data-dismiss="modal">Fechar</button>
                <button type="button" class="btn btn-custom waves-effect waves-light btn-add-row">Incluir</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
@endsection
@push('scripts')
<script>"use strict";
    $(".btn-remove-row").click(function (event) {
        event.preventDefault();
        console.log("teste");
        var tr = $(this).closest("tr");
        tr.fadeOut(400, function () {
            tr.remove();
        });
    });

    $(".btn-add-row").click(function (event) {
        event.preventDefault();
        var newRow = $('<tr>');
        var cols = '';
        cols += '<td></td>';
        cols += '<td></td>';
        cols += '<td></td>';
        cols += '<td>';
        cols += '<a class="btn-remove-row" href=""><i class="mdi mdi-close-circle font-18 text-danger"></i></a>';
        cols += '</td>';
        newRow.append(cols);
        $(".table").append(newRow);
        $("#myModal").modal("toggle")
    });
</script>
@endpush
    
asked by anonymous 05.04.2018 / 14:55

2 answers

1

I was able to resolve by adding $(document).on('click', '.btn-remove-row', function(event){ to both functions.

<script>"use strict";
    $(document).on('click', '.btn-remove-row', function(event){
        event.preventDefault();
        var tr = $(this).closest("tr");
        tr.fadeOut(400, function () {
            tr.remove();
        });
    });

    $(document).on('click', '.btn-add-row', function(event){
        event.preventDefault();
        var newRow = $('<tr>');
        var cols = '';
        cols += '<td></td>';
        cols += '<td></td>';
        cols += '<td></td>';
        cols += '<td>';
        cols += '<a class="btn-remove-row" href="#"><i class="mdi mdi-close-circle font-18 text-danger"></i></a>';
        cols += '</td>';
        newRow.append(cols);
        $(".table").append(newRow);
        $("#myModal").modal("toggle")
    });
</script>
    
05.04.2018 / 15:20
0

Add javascript: void (0) in href

<a class="btn-remove-row" href="javascript:void(0)">
    <i class="mdi mdi-close-circle font-18 text-danger"></i>
</a>

$(document).ready(function(){
  $(".btn-remove-row").click(function(){
    console.log('funfou')
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><aclass="btn-remove-row" href="javascript:void(0)">
        <i class="mdi mdi-close-circle font-18 text-danger">rerr</i>
    </a>
    
05.04.2018 / 15:01