0

我有一个预定义的 div 和相应的 CSS，如下所示：

<div id="pin0" style="display: none" class="pin">
        <div class="comment">
            <div class="delete">
                <a href="javascript:void(0);" onclick="deletePin(this);">
                    <img src="/Images/RE/cross.png" style="border: 1px groove" width="16px" height="16px" /></a>
            </div>
            <textarea style="border: 0px; resize: both;" rows="3" cols="35" placeholder="Comment"></textarea>
        </div>
    </div>
    <img src="/Images/RE/03.png" />

.pin
    {
        position: absolute;
        background-image: url('/Images/RE/ping.png');
        width: 32px;
        height: 16px;
        z-index: 999;
    }

    .delete
    {
        position: relative;
        top: 0px;
        left: 0px;
        background-color: transparent;
        width: 300px;
        text-align: right;
    }

    .comment
    {
        position: absolute;
        top: 100%;
        left: auto;
    }

这将是结果：

在此处输入图像描述

请注意，这整个DIV是一个隐藏元素，然后允许用户通过 JQuery 双击克隆它们，如下所示：

$("#clicks").dblclick(function (e) {
            var offset_t = $(this).parent().offset().top - $(window).scrollTop();
            var offset_l = $(this).parent().offset().left - $(window).scrollLeft();

            var newX = Math.round((e.clientX - offset_l));
            var newY = Math.round((e.clientY - offset_t));

            var newDiv = $('#pin0').clone();
            newDiv.attr('id', 'pin' + $("#clicks").children('.pin').length);

            $(newDiv).css('top', newY - 25);
            $(newDiv).css('left', newX - 10);
            $(newDiv).css('display', 'block');

            $(this).append(newDiv);
            $(newDiv).draggable();
        }
        )

如您所见，我将 ID 设置为'pin' + $("#clicks").children('.pin').length. 现在我想知道如何动态地操作这个特定的元素。我已经尝试了非常手动的方式，方法是硬编码如下 ID，但根本不起作用：

$("#pin1").focus(function (e) {
            alert("hello!");
        })
4

1 回答 1

2

使用.on()

由于您的内容是动态添加的，因此无法直接访问，因此您必须使用事件委托。

$("#clicks").on('focus','#pin1',function (e) {
        alert("hello!");
});

OP评论后更新

单击图像时会出现警报

$("#clicks").on('click','#pin1 img',function (e) {
        alert("hello!");
});

当您单击以 id 开头的图像时，将发出警报 pin

$("#clicks").on("focus", "[id^=pin] img", function (e) {
        alert("hello!");
});

提醒 id

$("#clicks").on("focus", "[id^=pin]", function (e) {
        alert(this.id);
});

或与 img

$("#clicks").on("focus", "[id^=pin] img", function (e) {
        alert($(this).closest("[id^=pin]").attr("id"));
});
于 2013-09-30T09:21:15.757 回答