Question

我正在尝试这样做，当你点击图像时，它会在文档中执行一个功能。

现在我遇到了一些麻烦，我确定这是一个愚蠢的错误，但这里有什么不对吗？

<script type="text/javascript">
$.getJSON("https://api.twitch.tv/kraken/search/streams?q=star&type=suggest&callback=?", function (data) {
    $i = 0;
    $.each(data.streams, function (index, item) {
        $("<img>").attr("src", item.preview.medium).attr("onclick", "").appendTo("#images");
        $i++;
    });
});
</script>

它们显示正确，只是onclick事件不起作用。

Answer 1

为每个图像添加一个类，例如'leImage'。

创建一个这样的事件监听器：

$(".leImage").on("click", function()
{
    // Do stuff, get id of image perhaps?
    var id = this.id;
    // or
    var id = $(this).attr("id");
});

如果这不是您所要求的，那么您必须更清楚：）

Answer 2

您正在使用jquery创建元素..所以只需使用其方法

$("<img>")
    .attr("src", item.preview.medium)
    .click(function(){ showStream(index);})
    .appendTo("#images");

或者您使用此语法

$("<img>", {
    src: item.preview.medium,
    click: function(){showStream(index);}
}).appendTo("#images");

Answer 3

试试这种方式;

<script type="text/javascript">
$.getJSON("https://api.twitch.tv/kraken/search/streams?q=star&type=suggest&callback=?", function (data) {

    $.each(data.streams, function (index, item) {
        $("<img>").attr("src", item.preview.medium).appendTo("#images");

    });
});


 $("#images img").on("click",function(e){
   alert("your function all")

  })
</script>

Answer 4

点击后的功能名称是空白的吗？

$("#something").attr("onClick","new_function()");

Answer 5

首先为图像设置id。

<img src="../images/warning.png" id="imageId"/>

之后使用此代码：

<script>
    $('#imageId').click(function () {
        alert('It works!');
    });
</script>

jQuery onClick图像事件

5 个答案: