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

我相信您的问题是您在创建img元素之前设置了事件处理程序。因此，$('.go img')无法找到任何可用的内容。

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

请参阅http://api.jquery.com/on/

中的直接和委派活动部分

编辑：当然对于CSS，您需要在创建时执行此操作，或者更好，实际上将其添加到CSS本身：

.go img
{
    cursor: pointer;
}

Answer 2

使用以下更改解决它。使用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;
});
});

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

2 个答案: