Question

在html页面中，我在div中加载手动3个图像。通过jquery我从同一div中的dir加载所有图像。

通过点击图片，添加的手册会对课程作出反应，并将其自我插入文本框（一个可信的div）

添加的jquery根本不会做出反应。

图像的所有代码都是相同的。（f12）

我想这是一个有负载时间的东西。但任何人都可以帮助我。

我的代码（脚本）

<script>
    $(function () {
        loadicon('#mydiv', "../images/ico", "25px", "25px");
        $('.InsertEmo').click(function () {
            var img = " <img src=\"" + $(this).attr('src') + "\" width=\"" + $(this).attr('width') + "\" height=\"" + $(this).attr('height') + "\" /> ";
            $('#divMessage').html($('#divMessage').html() + " " + img + " ");
        });
    });

    function loadicon(tab, dir, imgWidth, imgHeight) {

        var fileextension = [".gif", ".png", ".jpg", ".ico"];
        var filename;

        $.ajax({
            //This will retrieve the contents of the folder if the folder is configured as 'browsable'
            url: dir,
            success: function (data) {
                //Lsit all png file names in the page
                $(data).find("a:contains(" + (fileextension[0]) + "), a:contains(" + (fileextension[1]) + "), a:contains(" + (fileextension[2]) + "), a:contains(" + (fileextension[3]) + ")").each(function () {
                    filename = this.href.replace(window.location.host, "").replace("http:///", "");
                    $(tab).append($("<img type='image' src=" + "../" + filename + " width=\"" + imgWidth + "\" height=\"" + imgHeight + "\" class='InsertEmo' />"));
                });
            }
        });
    }
</script>

Mycode HTML

    <div class="messageBar" style="min-height: 30px; width:800px;">
        <div id="divMessage" contenteditable="true" class="textbox single-line" style="float:left; border: 1px solid black; width: 300px "></div>
    </div>
    <br/>
    <div id="mydiv">
        <img type="image" src="../Images/checkmark.ico" width="25px" height="25px" class="InsertEmo" />
        <img type="image" src="../Images/folder.ico" width="25px" height="25px" class="InsertEmo" />
        <img type="image" src="../Images/skype.ico" width="25px" height="25px" class="InsertEmo" />
    </div>

Thanx Dinand

Answer 1

您必须委派点击事件：

$('#mydiv').on('click', '.InsertEmo', function () {
            var img = " <img src=\"" + $(this).attr('src') + "\" width=\"" + $(this).attr('width') + "\" height=\"" + $(this).attr('height') + "\" /> ";
            $('#divMessage').html($('#divMessage').html() + " " + img + " ");
        });

这样，动态添加的元素将从其父元素获取事件委托。

Answer 2

前三个图像得到了处理程序，因为你在页面加载后绑定它。但是后来没有创建重新加载的图像，因此选择器不会包含它们。您必须再次为每个创建的图像绑定点击处理程序：

   var $image = $("<img type='image' src=" + "../" + filename + " width=\"" + imgWidth + "\" height=\"" + imgHeight + "\" class='InsertEmo' />");

   $image.click(function () {
       var img = " <img src=\"" + $(this).attr('src') + "\" width=\"" + $(this).attr('width') + "\" height=\"" + $(this).attr('height') + "\" /> ";
        $('#divMessage').html($('#divMessage').html() + " " + img + " ");
    });

   $(tab).append($image);

Jquery加载的图像没有在类上做出反应

2 个答案: