javascript - 从 PHP 代码加载图像，然后在单击时更改主页上的图像

Question

我正在努力寻找一种方法来完成这项工作。

我有这个<div id="profile-picture-selection"></div>页面加载时它是空的。

我有一个基本的“注册表”表单和一个图像选择标签:

<a id="Choose-Profile-Picture" href="#">
 <span id="Choose-Profile-Picture-Q">Choose Profile Picture</span>
 <img class="user" src="images/sir.png">
</a>

当我单击图像并运行 jQuery 事件时

$("#Choose-Profile-Picture").on("click",function(){
  $.get("load_more.php", function(data){
    $("#profile-picture-selection").html(data);
  }); 
});

我调用我的 PHP 代码 load_more.php 来显示十张图像

<?php

  $images = glob('images/faces/*.{png}', GLOB_BRACE);
  $counted += 10;
  $i = 0;

  foreach ($images as $image) {
    if($i == $counted) {
      return;
    } //end if

    //shows images in console
    echo("<script>console.log('PHP: ".$image."');</script>");

    $i++;
    echo "<a id='b-tag' href='#'>
          <span id='b-profpic'>Choose this?</span>
          <img class='choose-user' src='$image'>
          </a>";
  } //end foreach

?>

这就是我遇到问题的地方。

我有这个来注册我正在点击div我刚刚填充了图像:

$(function() {
 $("#profile-picture-selection").click(function(e) {
     if (e.target.id == "profile-picture-selection" || $(e.target).parents("#profile-picture-selection").size()) { 
         alert("Inside div");

         //this changes the image that i selected right ?
         //$(".user").attr("src",$('.choose-user').attr('src'));

     }
});

如何获取我点击的图像，然后在主页上更新？

我有一个真实的例子here .

Answer 1

问题是点击事件无法正确到达您创建的 DOM 元素。
jQuery 没有这样做 if，而是为这种情况提供了一个(我不知道这个名字是否正确)事件委托(delegate)。

$("#profile-picture-selection").on('click','#b-tag',function(e) { //whatever })

要记住的技巧是:

1. 选择 DOM.ready 时可用的 DOM 元素 (#profile-picture-selection)。
2. 声明哪个事件(“点击”)。
3. 定义一个选择器来查看之前选择的元素内部以委托(delegate)事件。 (在您的示例中为“#b-tag”)
4. e.preventDefault() 以避免网站中的 anchor 导航。

我尝试使用您的网站，似乎可以到达他们。
您应该考虑的另一件事是创建/拥有多个具有相同 ID 的元素。这是一个不好的做法，#b-tag 应该是 .b-tag 或任何你想要的。