使用php切换图像的Ajax只能工作一次

Question

我有两个图像是“pin”和“unpin”，我想在做一些数据库后端之后改变点击次数。

当我点击并成像后，它会按预期更改它。但是，当它应该将其更改回另一个图像时，单击新图像不会执行任何操作。

简而言之，这里有html和ajax的东西。我创建了一个具有唯一ID的跨度，因为会有很多。我创建了图像并为其提供了唯一的ID以及数据。数据和唯一ID是数字公司ID。目标是单击图像，获取id并使用相同的id替换为另一个图像。

同样，它在第一次点击时工作正常，但后续点击新图片不会做任何事情。

ajax的东西被加载到页面的头部。

感谢您的期待!!!

这是php / html部分

 if($isfavorite == 0) {
    $id       = "pin_${companyid}";
    $pinit    = "pinit${companyid}";
    $favorite = "<img data-cid='$companyid' id='$id' src='white_pin.png' style='cursor:pointer'>";
 } else {
    $id       = "unpin_${companyid}";
    $pinit    = "pinit${companyid}";
    $favorite = "<img data-cid='$companyid' id='$id' src='white_unpin.png' style='cursor:pointer'>";
 }


    echo "<span id='$pinit' style='float:right;'>$favorite</span>";

我已经简化了代码，但仍然可以获得相同的行为。

   $("[id^='unpin_']").on('click',function(){
      var newimg = 'siteimages/icons/white_pin.png';
      $(this).attr('src', newimg).attr('alt', 'Add').attr('title', 'Add to favorites');
   });


   $("[id^='pin_']").on('click',function(){
      var newimg = 'siteimages/icons/white_unpin.png';
      $(this).attr('src', newimg).attr('alt', 'Remove').attr('title', 'Remve from favorites');
   });

从控制台屏幕截图的附加图像中可以看出，所有内容都按预期工作。问题持续存在，只能翻转一次。

Answer 1

变化：

$('').click(function(){..});

要：

$('').on('click',function(){..});

或使用旧行为（我不知道你的jQ版本）：

$('').live('click',function(){..});

详细了解该行为 - 动态DOM元素的事件处理程序jQuery -on。

Answer 2

  

目标是点击图片，获取ID并使用相同的ID替换为其他图片。

创建新图像时，点击处理程序可能会丢失。

执行此操作：在图像容器上设置点击处理程序：

          

像这样：

#include <iostream>
#include <boost/date_time/posix_time/posix_time.hpp>

class Foo
{
public:
  boost::posix_time::ptime t;
  Foo() : t() {}
};

int main()
{
  Foo foo;
  std::cout << std::boolalpha
            << foo.t.is_not_a_date_time() << '\n';
}

这样，#container中所有带有类别引脚的图像 - 甚至是新的图像 - 将共享相同的点击处理程序，并且由于您没有修改容器，因此点击处理程序不会消失。