Функция Jquery для выполнения с нажатием кнопки

Question

У меня возникла проблема с JQuery, где она не выполняет функцию после нажатия кнопки.

То, что я пытаюсь сделать, - показать мода загрузки, когда пользователь нажимает кнопку отправки формы, а затем она уходит после загрузки страницы.

Показывает мода загрузки при загрузке страницы ... но при нажатии кнопки ничего не происходит.

HTML Button Форма:

<button type="submit" name="btn-add" id="btn-add">Add Line</button> 

PHP код:

//Add Button 
if(isset($_POST['btn-add'])) 
{ 
    //PHP Code (Works Fine) 
} 

JQuery:

<!-- jQuery --> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 

<script type="text/javascript"> 
    $(window).load(function(){ 
     $(".loading").fadeOut(400); 
     $(".content_wrapper").delay(400).fadeIn(400); 
    }); 

    $('#btn-add').click(function() { 
     $(".content_wrapper").fadeOut(400); 
     $(".loading").delay(400).fadeIn(400);  
    }); 
</script> 

Answer 1

Попробуйте настроить таргетинг на кнопку с помощью селектора атрибутов и сделать его подождать, пока не будет загружен DOM. $(document).ready().

$(document).ready(function(){ 
    $('#btn-add[name="btn-add"]').click(function(){ 
     $(".content_wrapper").fadeOut(400); 
     $(".loading").delay(400).fadeIn(400);  
    }); 
}); 

Answer 2

Возможная проблема может быть, что вы пытаетесь связать ваш обработчик щелчка перед DOM загружен/элемент #btn-add находится на странице.

Если отображаемый javascript находится в заголовке html, это будет проблемой.

Чтобы избежать этого, вы должны связать ваш обработчик щелчка, когда DOM загружен:

// Execute this when the DOM is ready 
$(document).ready(function() { 
    $('#btn-add').click(function() { 
     $(".content_wrapper").fadeOut(400); 
     $(".loading").delay(400).fadeIn(400);  
    }); 
}); 

Answer 3

Вам нужно будет отложить форму представления достаточно долго, чтобы показать ваш div. Вместо прослушивания нажмите кнопку прослушать отправку формы.

<form id='myform'>...</form> 

$("#myform").submit(function(e){ 
    var form = this; 
    e.preventDefault(); // prevent submission 
    $(this).off('submit'); // remove handler to prevent recursion 
    $(".loading").delay(400).fadeIn(400, function(){ // add callback to submit the form in 
     $(form).submit(); // submit the forrm for real.. 
    }); 
});