无法获取.click以选择容器中返回的图像

Question

很抱歉写了这么长一篇文章，但我认为如果没有所有的细节，我很难理解我想解决的问题。

当用户点击通过 显示的图像之一时，下面的代码应该将第一张图像返回到一个弹出框

<div class="go" id="container"></div>

此刻，当我将鼠标移到图像上并尝试选择一个时，什么也没有发生。然而，如果我从下面的行中删除'img'，它会工作，但它会选择所有的图像。

                    $('.go').css('cursor', 'pointer');
                    $('.go').click(function (e) {

我猜我的选择器有问题?

---

_.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);
});
///SECTION 2 -Click/Select friend image to be captured and used with section 3//////////
// set up event handler
 $('#container').on('click', '.wrapper', function () {
console.log(this);
 var wrapper = $(this);
console.log(wrapper.data('friendRequestId'));
 // remove selected from all wrappers in case one was already selected
$('#container .wrapper').removeClass('selected');
 // mark clicked wrapper as selected
wrapper.addClass('selected');
// save friendRequestId as a global that can be read by other code
window.selectedFriendRequestId = wrapper.data('friendRequestId');
// enabled button
$('#simulateAddBadge').removeAttr('disabled');
});

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

<!---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>
            <!---Pop up box stuff ends-->

Answer 1

使用以下更改解决。使用jQuery事件委托在动态生成的

上触发click函数

$(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;
});
});

Answer 2

我认为您的问题在于您在创建img元素之前设置了事件处理程序。所以$('.go img')找不到任何工作。

你有两个选择:当你添加<img>时，你可以做.css()和.click()调用(然后你可以直接将它们添加到你刚刚创建的元素中，不需要选择器)，或者使用委托处理程序:你把它们放在父元素上，并在.on调用的参数中添加选择器，例如:$(document).on('click','.go img',function...)。

参见http://api.jquery.com/on/

中的直接和委托事件一节编辑:当然，对于CSS，你需要在创建时这样做，或者更好的是，实际添加到CSS本身:

.go img
{
    cursor: pointer;
}