Кнопка onclick event не срабатывает при первом щелчке

Я проверил и прочитал пару статей по этому вопросу и попробовал несколько вещей, но ничего не работает. Проблема в том, что при нажатии кнопки в первый раз ничего не происходит. Во второй раз, когда его щелкнул, произойдет событие и запрос ajax. Помимо необходимости дважды щелкнуть кнопку, данные ajax запрашиваются и отображаются дважды. Я видел несколько статей, которые сказали, проверяя видимость кнопок, и если он проверяет, чтобы отключить/на другую видимость элементов, в этом случае его нет. Кроме того, у меня есть onclick кнопки вызова метода для запуска ajax. Что странно, когда я удалил код из метода и поместить его в DOM готового случае срабатывает в первый раз, но мои Аякса данные никогда не возвращаетКнопка onclick event не срабатывает при первом щелчке

кнопки HTML:

<input id="btnSearch" onclick="GetInfo();" type="button" value="Find ID" class="button-ffe" />

Вот код нажмите:

function GetInfo() { 
    var term = $('#txtUtente').val(); 

    $('#btnSearch').click(function() { 

     var winW = window.innerWidth; 
     var winH = window.innerWidth; 
     var dialogoverlay = document.getElementById('dialogoverlay'); 
     dialogoverlay.style.display = "block"; 
     dialogoverlay.style.height = winH + "px"; 

     $.ajax({ 
      url: 'DAL/WebService1.asmx/GetPTSID', 
      method: 'post', 
      contentType: 'application/json;charset=utf-8', 
      data: JSON.stringify({ term: term }), 
      dataType: 'json', 
      success: function (data) { 
       document.getElementById('dialogoverlay').style.display = 'none'; 

       $('#infoFoundID').html(data.d[0]); 
       $('#foundInfoMessage, #userInformation').show(); 
       $('#registerProductInfo').hide();      
       var partTable = $('#partTable tbody'); 

       $(data.d).each(function (index, id) { 
        partTable.append('<tr> <td>' + id + '</td><td>' + '<input onclick="GetPartNumber();" id="Button1" type="button" value="Copy Number" />' + '</td></tr>'); 
       }); 
      }, 
      error: function (err) { 
       console.log(err); 
      } 
     }); 
    }); 
} //end getinfo

источник

2015-07-17 Troy Bryant

Ну, с первого щелчка вы назначаете ему другое событие: $ ('# btnSearch'). Click (function()), поэтому в первый раз ничего не происходит. – JavaScript

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

Вы присоединяете мероприятие первым кликом, поэтому код работает так, как вы пишете.

Вы можете удалить первое определение функции:

var term = $('#txtUtente').val(); 

$('#btnSearch').click(function() { 

    var winW = window.innerWidth; 
    var winH = window.innerWidth; 
    var dialogoverlay = document.getElementById('dialogoverlay'); 
    dialogoverlay.style.display = "block"; 
    dialogoverlay.style.height = winH + "px"; 

    $.ajax({ 
     url: 'DAL/WebService1.asmx/GetPTSID', 
     method: 'post', 
     contentType: 'application/json;charset=utf-8', 
     data: JSON.stringify({ term: term }), 
     dataType: 'json', 
     success: function (data) { 
      document.getElementById('dialogoverlay').style.display = 'none'; 

      $('#infoFoundID').html(data.d[0]); 
      $('#foundInfoMessage, #userInformation').show(); 
      $('#registerProductInfo').hide();      
      var partTable = $('#partTable tbody'); 

      $(data.d).each(function (index, id) { 
       partTable.append('<tr> <td>' + id + '</td><td>' + '<input onclick="GetPartNumber();" id="Button1" type="button" value="Copy Number" />' + '</td></tr>'); 
      }); 
     }, 
     error: function (err) { 
      console.log(err); 
     } 
    }); 
});

источник

2015-07-17 12:29:21

Нужно будет переместить переменную term в функцию щелчка. – JavaScript

, а также удалить атрибут onclick из элемента HTML. –

О да! Извините, что забыли это :( –

Итак, первый щелчок будет работать GetInfo() - который, добавляет JQuery нажмите слушателю (но не запускать его)

затем второй щелчок запускает функцию, определенную в прослушивателе кликов - и GetInfo - которая добавляет ДРУГОЙ экземпляр материала jQuery

Затем третий клик запускает функцию, определенную в прослушивателе кликов, дважды - и GetInfo - которая добавляет дополнительный экземпляр объекта EXOTHER материал jQuery

источник

2015-07-17 12:30:08

Ваша функция щелчка jQuery находится в вашей функции GetInfo(). Меняйте JS для:

var getInfo = { 
    init: function() { 
     $(document).ready(function() { 
      getInfo.click(); 
     }); 
    }, 
    click: function() { 
     var term = $('#txtUtente').val(); 

     $('#btnSearch').click(function() { 

      var winW = window.innerWidth; 
      var winH = window.innerWidth; 
      var dialogoverlay = document.getElementById('dialogoverlay'); 
      dialogoverlay.style.display = "block"; 
      dialogoverlay.style.height = winH + "px"; 

      $.ajax({ 
       url: 'DAL/WebService1.asmx/GetPTSID', 
       method: 'post', 
       contentType: 'application/json;charset=utf-8', 
       data: JSON.stringify({ term: term }), 
       dataType: 'json', 
       success: function (data) { 
        document.getElementById('dialogoverlay').style.display = 'none'; 

        $('#infoFoundID').html(data.d[0]); 
        $('#foundInfoMessage, #userInformation').show(); 
        $('#registerProductInfo').hide();      
        var partTable = $('#partTable tbody'); 

        $(data.d).each(function (index, id) { 
         partTable.append('<tr> <td>' + id + '</td><td>' + '<input onclick="GetPartNumber();" id="Button1" type="button" value="Copy Number" />' + '</td></tr>'); 
        }); 
       }, 
       error: function (err) { 
        console.log(err); 
       } 
      }); 
     }); 
    } 
}; 

getInfo.init();

Теперь вы можете изменить HTML для:

<input id="btnSearch" type="button" value="Find ID" class="button-ffe" />

Это должно работать.

источник

2015-07-17 12:34:40

Кнопка onclick event не срабатывает при первом щелчке

ответ

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