Jquery(Нубский вопрос)

147

17 декабря 2019, 23:30

Функция работает некорректно. При нажатии на кнопку изменение происходит на миг и не фиксируется

$(document).ready(function(){ 
  $(".a-add-prjct").click(function(){ 
    $(".a-add-prjct").hide(); 
    $(".prjct-form").show(); 
 
  }); 
});

.prjct-frm-btn { 
  display: inline-block; 
} 
 
.prjct-form { 
  display: none; 
}

<a href="" style="color: red;" class="a-add-prjct">+Add project</a>	 
<form class="prjct-form" action="" method=""> 
  <input type="text" class="form-control" style="width: 50%;" placeholder="project name"> 
  <button type="submit" class="btn btn-primary prjct-frm-btn">Add</button> 
  <a href="" class="a-prjct-form prjct-frm-btn">Cancel</a> 
</form>

Answer 1

Происходит переход по ссылке и вы видите пустую страницу, решить можно вот так:

<a href="#" ...

Вот рабочий пример:

$(document).ready(function(){ 
  $(".a-add-prjct").click(function(){ 
    $(".a-add-prjct").hide(); 
    $(".prjct-form").show(); 
  }); 
});

.prjct-frm-btn { 
  display: inline-block; 
} 
 
.prjct-form { 
  display: none; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<a href="#" style="color: red;" class="a-add-prjct">+Add project</a>	 
<form class="prjct-form" action="" method=""> 
  <input type="text" class="form-control" style="width: 50%;" placeholder="project name"> 
  <button type="submit" class="btn btn-primary prjct-frm-btn">Add</button> 
  <a href="" class="a-prjct-form prjct-frm-btn">Cancel</a> 
</form>