JQuery AJAX запускается дважды при клике

Question

Я пытаюсь сделать два Ajax-вызова на одной странице, используя jQuery.Первый Ajax успешно работает и дает результаты.Второй Ajax должен запускаться при нажатии кнопки и показывать результат, но он запускается дважды каждый раз, когда я нажимаю на кнопку.И первоначально при первом нажатии на кнопку, я должен дважды щелкнуть, прежде чем он даст результат.Вот что я пытаюсь сделать:

function showPicture() {
$("button").click(function() {
  var id = this.id;
  $.ajax({
    type: 'POST',
    url: 'displaySearch.php',
    data: {'getTile': $(this).val()},
    success: function(data) {
      console.log(id);
      $("#" + id).replaceWith("<img src=" + data + " />");
    }
  });
});

}

Вот моя кнопка:

<button id=" . $count . " onclick=showPicture() value=" . htmlentities($result['Poster']) . ">Click Me!</button>

Я видел похожие вопросы в Google, но не могу понятьв чем проблема.Любая помощь будет принята с благодарностью.

Answer 1

Ваша функция 'showPicture', которую вы вызываете из атрибута html ниже

 <button id=" . $count . " onclick=showPicture() 

, вызывает вашу функцию, как и следовало ожидать.

, но сама функция showPicture ()привязка события onclick

function showPicture() {

     $("button").click(function() {  <------- this
 ......

Таким образом, по нему дважды наносится удар, поскольку у вас есть атрибут onclick и четное связывание onclick.Щелчок события происходит по всем кнопкам html.

Что нужно сделать: удалить привязку в функции ко всем кнопкам

function showPicture(caller) {

   var id = $(caller).attr("id");
   var val = $(caller).val();

   console.log(id);
   console.log(val);

   $.ajax({
      type: 'POST',
      url: 'displaySearch.php',
      data: {'getTile': val },
      success: function(res) {

         --you are replacing the button with an image... or something like that
         $("#" + id).replaceWith("<img src=" + res+ " />");
      }
  });
}

html

<button id=".$count." onclick="showPicture(this)" value=".htmlentities($result['Poster']).">Click Me!</button>

Answer 2

У вас есть 2 обработчика onClick, несколько:

1. onClick
2. $("button").click()

Удалите один из обработчиков.

Пример

function showPicture(id) {
  $.ajax({
    type: 'POST',
    url: 'displaySearch.php',
    data: {'getTile': $(this).val()},
    success: function(data) {
      console.log(id);
      $("#" + id).replaceWith("<img src=" + data + " />");
    }
  });
}

<button id=" . $count . " onclick=showPicture(" . $count . ") value=" . htmlentities($result['Poster']) . ">Click Me!</button>