Question

我正在尝试使用jQuery在一页中进行两个Ajax调用。第一个Ajax成功运行并产生结果。 Second 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

您有2个onClick处理程序，

onClick
$("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>

Answer 2

您要从下面的html属性调用的函数“ showPicture”

 <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>

jQuery AJAX在单击时运行两次

2 个答案:

示例