javascript - jQuery 代码中的 jQuery 事件

Question

我正在努力做到这一点，当你点击一个加载了 jQuery 的图像时它会触发一些东西，我决定使用 html 的“onclick”事件来运行 jQuery 脚本，但似乎有一个错误。

错误:

Unexpected token "/"

代码:

$("<img>").attr("src", item.preview.medium).attr("style", "margin-right:1%;margin-top:1%;").attr("onclick", 
    "$('#placeholder').html('<object type="application/x-shockwave-flash" 
    style="float:left;margin-left:1%;margin-bottom:1%;" height="378" width="620" 
    id="live_embed_player_flash" 
    data="http://www.twitch.tv/widgets/live_embed_player.swf?channel=' + item.channel.display_name + '&auto_play=false"
    bgcolor="#000000">
         <param name="allowFullScreen" value="true" />
         <param name="allowScriptAccess" value="always" />
         <param name="allowNetworking" value="all" />
         <param name="movie" value="http://www.twitch.tv/widgets/live_embed_player.swf" />
         <param name="flashvars" value="hostname=www.twitch.tv&channel=' + item.channel.display_name + '&auto_play=false&start_volume=25" />
     </object>')").appendTo("#content");

新代码:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$.getJSON("https://api.twitch.tv/kraken/search/streams?q=path%20of%20exile&callback=?", function (data) {
    $.each(data.streams, function (index, item) {
                $("<img>").attr("src", item.preview.medium).attr("style", "margin-right:1%;margin-top:1%;").attr("id", "imgg").appendTo("#content");
                       $("#imgg").click(function() {
                       var obj=$( "<object></object>", 
                       { "style" : "float:left;margin-left:1%;margin-bottom:1%;",
                       "height": "378", "width": "320", "bgcolor": "#000000",
                       "id" : "live_embed_player_flash",
                       "data" : "http://www.twitch.tv/widgets/live_embed_player.swf?channel=" + item.channel.display_name + "&auto_play=false" 
                       });
                       $('#placeholder').empty().append(obj);
                })
    });

});
</script>

错误:

http://gyazo.com/5cd42fd599822344b0a00c5f8f5e63ab.png

顺便说一下，只有当我点击图片时才会出现这个错误。

Answer 1

您的代码字符串的引用管理有问题:

"$('#placeholder').html('<object type=" // being the string
application/x-shockwave-flash // not in the string, the "/" here being the unexpected token.

不尝试在一行中完成所有这些操作并使用单独的函数为占位符生成对象 html block 可能会容易得多 - 也许使用 jQuery 构建它然后获取 html 字符串？