2015-08-11 2 views
2

Это HTML-код:

<!doctype html> 
<html> 
<head> 
    <title>title</title> 
    <meta charset="utf-8"> 
    <script src="vendor/jquery.js"></script> 
    <script> 
     $(document).ready($(".voice").click(function() { 
      alert("succeed"); 
     })); 
    </script> 
</head> 
<body> 
    <div class="container"> 
     <div class="voice-div"> 
      <input type="text" class = "voice" /> 
     </div> 
    </div> 
    </div><!-- close class="wrapper" --> 

    <!-- the support button on the top right --> 
</body> 
</html> 

Когда я нажал input, alert не всплывал. Но когда я положил

<script> 
    $(document).ready($(".voice").click(function() { 
     alert("succeed"); 
    })); 
</script> 

перед </body>, это сработало. Зачем? Если я хочу поместить скрипт в часть <head>...</head>, как мне изменить код?

+0

https://learn.jquery.com/using-jquery-core/document-ready/ – j08691

ответ

15

Я не думаю, что у вас может быть объявление события, подобное тому, которое сразу же встроено в блок $(document).ready.... Попробуйте изменить свой код на следующее:

$(document).ready(function() { 
    $(".voice").click(function() { 
     alert("succeed"); 
    }); 
}); 

или сокращенную как:

$(function() { 
    $(".voice").click(function() { 
     alert("succeed"); 
    }); 
}); 
11

Необходимо пройти ready a функция.

Вы передаете ему возвращаемое значение для звонка .click(). Следовательно, попытка привязки обработчика щелчка происходит немедленно (и терпит неудачу, поскольку элемент еще не находится в DOM), а функция ready игнорирует значение, которое вы передаете ему (потому что это не функция).

$(document).ready(
    function() { 
     $(".voice").click(
      function() { 
       alert("succeed"); 
      } 
     ); 
    } 
); 

Но когда я ставлю перед </body>, он работал.

Это потому, что элементы существуют в этой точке. Связывание готового события все еще терпит неудачу, но выражение, в которое вы передали возвращаемое значение, успешно связало события щелчка в первую очередь.

+3

@AshleyMedway - Хороший макет кода, который четко показывает, где начинается и заканчивается каждый вызов функции и функции. – Quentin

-2
<script> 
    $(document).ready(function() { 
     $(".voice").click(function() { 
      alert("succeed"); 
     }); 
    }); 
</script> 
+10

Пожалуйста, разместите ответ с помощью всего лишь фрагмента кода. – evolutionxbox

3

Причина заключается в том, что вы не кодирования это правильный путь. Изменение кода на:

<script> 
$(document).ready(function() { 
    $(".voice").click(function(){ 
     alert("succeed"); 
    }); 
}); 
</script> 

В своем коде, вы поставили: $(".voice").click внутри готов в качестве аргумента, , поэтому Javascript немедленно выполняет его не на document.ready поэтому он будет работать после того, как тело тега, но не раньше, Это.

4

Скрипт должен выглядеть следующим образом:

$(document).ready(function() { 
    $(".voice").click(function() { 
     alert("succeed"); 
    }); 
}); 

Это о добавлении обратных вызовов функции «объекты». То, что вы делали, на самом деле вызывало функции (щелчок, а затем предупреждение) сразу при загрузке скрипта и передачу результатов (если они есть) в качестве аргументов.

0

Если вы хотите назвать эту внешнюю сторону готовой функции вы можете попробовать что-то вроде этого

$(document).on("click",".voice",function() 

{ 

alert ('called'); 

}) ; 

В этом случае вы все равно можете использовать его после того, как Ajax запроса при применении новых элементов с этим именем класса после успеха ajax.

Смежные вопросы