Javascript 如何限制。单击第一个图像以避免获取存储在容器中的所有图像

目前，我有多个图像返回到此div（按预期工作）

这就是图像的拍摄方式

                       _.each(friends, function (item) {
                            // using a wrapper so the user can click the pic or the name
                            var wrapper = $('<div class="wrapper" data-friend-request-id="' + item.friendRequestId + '"></div>');
                            wrapper.append('<img class="images" src="' + item.imageURL + '" />');
                            wrapper.append('<div>' + item.username + '</div>');
                            $('#container').append(wrapper);
                        });

\每个（朋友、功能（项目）{
//使用包装器，以便用户可以单击图片或名称
var包装器=$（''）；
append（“”）；
append（“”+item.username+“”）；
$（'#container'）。追加（包装器）；
});

这是弹出框

 <!---Pop up box with info about the badge and options for user to complete-->
            <div id="modal">
                <div id="heading">
                    Award your friend this badge!?
                </div>

                <div id="content_pb">

                    <div id="badgeselect">
                    </div>

                    <p>This will be text that describes the badge
                        <br>and the reason for awarding it</p>

                    <form action="#" method="get">
                        <input type="text" placeholder="Select friend" id="username" required/>
                        <input type="text" placeholder="Add comment" id="email" required/>

                        <br>
                        <br>
                    </form>

                    <a id="send" class="button green close">
                        <img src="images/tick.png">Yes, do it now!</a>

                    <a href="http://kudosoo.com/JQUERYYTEST/dannyboy.html" class="button red close">
                        <img src="images/cross.png">No, Iâm insane!</a>
                    <br>
                    <br>

                </div>
            </div>

授予你的朋友这个徽章！？
这将是描述徽章的文本

授予它的原因是什么

如果只想将图像集中的第一个图像作为目标，可以在jquery中使用

.first（）

而不是这条线

 $('.go').click(function (e) { 

像下面这样使用。它将只针对容器下列出的第一个图像

 $('.go img').first().click(function (e) { 

---

我可能理解不正确，您是否只需要一张图像来响应“单击”事件

在这里，您将事件绑定到

div.go

，后者是一组图像元素的容器，此

div

或其子体都可以由于事件气泡触发事件。查看此jQuery文档以了解，尤其是直接和委托事件部分

如果选择器被省略或为null，则事件处理程序称为直接或直接绑定。每次选定元素上发生事件时，都会调用处理程序， 它是直接出现在元素上，还是从后代（内部）元素冒泡

在这里，您的案例是“直接”，您可以使用

单击
事件直接绑定
div.go
。因此，单击任何图像也会触发弹出窗口

若您只想影响一个图像，一种方法就是直接将事件绑定到这个特定的图像元素。希望这将对您有所帮助。
您必须在特定图像
（'.go img'）上提交单击事件。单击
而不是图像容器
（'.go'）。单击
，这样，它就不会加载整个容器html或图像，而是将单个图像元素加载到模式弹出框中

$(document).ready(function () {
$('.go img').css('cursor', 'pointer');
$('.go').on('click','img',function (e) {
 $(this).width(100).height(100).appendTo('#badgeselect');
  $('#modal').reveal({
    animation: 'fade',
    animationspeed: 600,
    closeonbackgroundclick: true,
    dismissmodalclass: 'close'
   });
  return false;
});
});

图像是否也有“go”类？图像的引用在哪里？你也可以发布吗？@fredfisco我已经添加了代码requested@Dano007尝试替换“$（'.go'）。单击（函数（e）{”到“$（'.go div.wrapper'）。单击（函数（e）{”->这意味着您正在将click事件挂接到包装器上，而不是父容器上。谢谢，这似乎是解决方案的最佳答案。唯一发生的事情是，当我使用您的代码时，实际发生了。click不再处理图像了？请使用jQuery事件委派触发图像上的click函数我已经更新了上面的代码，请看。
 $('.go img').first().click(function (e) { 

$(document).ready(function () {
$('.go img').css('cursor', 'pointer');
$('.go').on('click','img',function (e) {
 $(this).width(100).height(100).appendTo('#badgeselect');
  $('#modal').reveal({
    animation: 'fade',
    animationspeed: 600,
    closeonbackgroundclick: true,
    dismissmodalclass: 'close'
   });
  return false;
});
});