JQuery функция не вызывается по нажатию кнопки

я следующую разметку/кодJQuery функция не вызывается по нажатию кнопки

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>Demo</title> 

    <script src="directory for jquery script"> 
    $(document).ready(function() { 
     $("button").on('click', 'test', function() { 

      var webserUrl = "http://wsf.cdyne.com/WeatherWS/Weather.asmx"; 
      var soapRequest = '<ns1:GetWeatherInformation  xmlns:ns1=\'http://ws.cdyne.com/WeatherWS/\' />'; 
      $.ajax({ 
       type: "POST", 
       url: webserUrl, 
       contentType: "text/xml", 
       dataType: "xml", 
       data: soapRequest, 
       success: SuccessOccur, 
       error: ErrorOccur 
      }); 
     }); 
    }); 
    function SuccessOccur(data, status, req) { 
     if (status == "success") 
      alert(req.responseText); 
    } 
    function ErrorOccur(data, status, req) { 
     alert(req.responseText + " " + status); 
    } 
</script> 

</head> 
<body> 



<button id="test">Test</button>

по нажатию кнопки тест я хотел бы запрос на мыло, чтобы быть отправлено, но по какой-то причине когда я нажимаю кнопку, ничего не происходит, я могу подтвердить, что она просматривает jquery.js (2.1.1).

Я уверен, что это глупая ошибка, но я ее не вижу, код, который у меня есть (это переработанная версия), отлично работает, но этот код не работает.

Любая помощь при выборе проблемы в высшей степени получена.

источник

2014-09-22 user1383163

Я отказался от моего 'close' голоса, поскольку есть несколько вопросов (а не только просто опечатка). Надеюсь, теперь все покрыто ниже :) –

Typo #test. Селектору id нужен префикс #.

$("button").on('click', '#test', function() {

и да, это была глупая ошибка. Я называю эту ситуацию кодовую слепоту .. смотрел на нее так долго вы не можете видеть проблемы больше :)

Важное обновление

Вы в настоящее время злоупотребляет обработчик делегированы события. Я предположил, что это было не без оснований (например, динамическая замена содержимого страницы), в противном случае вы можете упростить обработчик, но это слишком тривиально, чтобы беспокоиться.

Текущий обработчик не сможет выдержать динамический контент, поскольку он напрямую связывается с button s, затем применяет фильтр. Если кнопки были добавлены/заменены динамически, они не привязывались бы к новым.

Надлежащий делегированы обработчик события будет

$(document).on('click', 'button#test', function() {

или, как это идентификатор просмотровых, просто

$(document).on('click', '#test', function() {

делегированных обработчики событий работают путем прослушивания событий (в данном случае click) пузырь до не меняющийся предок (document, если ничего не удобнее. Никогда не используйте 'body', так как он вызывает ошибки из-за проблем с дизайном), затем он применяет селектор jQuery к пузырьковым элементам, затем применяет эту функцию к любым соответствующим элементам, которые вызвали событие. Это позволит ему работать с элементами, которые не существуют во время выполнения кода, но будет существовать, когда произойдет событие (очень).

Примечания:

Как Pete TNT также указывает, блок скрипта не появляется, чтобы быть действительным.Пожалуйста, проверьте, что тоже :)

источник

2014-09-22 14:42:42

Мне любопытно, как это работает на самом деле - это не значит, когда я пытаюсь это поиграть. Как я понимаю из jQuery API, не пытается ли это связать обработчик с каждым элементом кнопки и передать #test как данные в событие? –

@Ivo Coumans: '# test' - это не данные. Это фильтр для делегированного обработчика событий, применяемого во время клика. –

Я не хочу противиться вам или чему-то еще, но это не в документации jquery, и это не работает для меня. Не могли бы вы предоставить рабочий jsfiddle? –

Вы можете использовать сокращенную запись для OnClick, а также, что позволит сделать ваш код немного проще:

$("button").click(function() { 
    // body here 
});

Предполагая, что вы хотите, чтобы функция нажмите, чтобы привязать к всем кнопки элементов на вашей странице, но вы, вероятно, просто хотите, чтобы он привязывался к кнопке #test. В этом случае, вы должны будете использовать $("#test") вместо:

$("#test").click(function() { 
    // body here 
});

источник

2014-09-22 14:47:14

Я предположил из кода, что содержимое может быть динамическим, поэтому оставил делегированный обработчик событий. –

Другой альтернативой было бы использовать сокращенную:

$('#test').click(function() { 
    // Oh yeah 
});

источник

2014-09-22 14:48:48 rnevius

Интересно ... Можете ли вы объяснить немного больше? Мне любопытно, что вы подразумеваете под «динамическим контентом», для которого требуется делегированный обработчик событий. – rnevius

Если содержимое страницы будет заменено динамически, нормальный обработчик событий будет отключен, и даже если повторный идентификатор повторится, привязка клика исчезнет. делегированные обработчики событий прослушивают пузырящиеся события у * неизменяющегося предка * (по умолчанию 'document', если ничего не имеется), затем примените селектор jQuery. –

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

<script src="js/jquery.js"></script> 
<script type="text/javascript"> 

    $(document).ready(function() { 
      $(document).on('click', '#test', function() { 
       /* and so on */ 
      }); 
     }); 
</script>

(Если только вы используете что-то вроде Resigs degrading script-tags)

источник

2014-09-22 14:52:35

+1: Хорошая мысль о блоке скрипта ... Чем больше я смотрю на код, тем больше проблем я нахожу. Примечание: делегированный обработчик '$ (« кнопка »). On (« click »,« # test »не будет работать для динамического содержимого, поскольку он должен привязываться к * неизменяющемуся предку *. –

Yup, это правда тоже , –

JQuery функция не вызывается по нажатию кнопки

ответ

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