jQuery event inside jQuery code

Question

I'm trying to make it so when you click on an image loaded with jQuery it will trigger something, I decided to use the "onclick" event using html to run a jQuery script but there seems to be an error.

Error:

Unexpected token "/"

Code:

$("<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");

New Code:

<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>

Error:

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

It only gets this error when I click on the image btw.

I've put the code on multiple lines and turned on syntax highlighting. This also shows where the code quoting breaks down :-) — vogomatix
– vogomatix, Commented Nov 24, 2013 at 17:48

Krease · Accepted Answer · 2013-11-24 17:58:42Z

1

Your code string has problematic quote management:

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

It would probably be much easier to not try and do this all in one line, and generate your object html block for your placeholder using a separate function - perhaps build it up with jQuery and then get the html string?

edited Nov 24, 2013 at 17:58

answered Nov 24, 2013 at 17:45

Krease

16.3k8 gold badges58 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

user3023566 Over a year ago

Ohh I see what you mean, so how would I actually do this? The single quotes would end the first html method's string.

Felix Kling Over a year ago

@user3023566: I'd suggest not to use an HTML string to create the element. It's just too much. Instead, create the DOM elements directly and set their properties. api.jquery.com/jQuery/#jQuery-html-attributes

vogomatix Over a year ago

You could use \ to escape some of the quotes, but that is a bad way to do it. Building DOM elements as @Felix has suggested is the way forward

Felix Kling Over a year ago

@user3023566: var $object = $('<object />', {id: 'live_embed_player_flash', style: '...'}). And then manipulate it further, like append the children to it, etc.

Felix Kling Over a year ago

@user3023566: See, there is so much string and HTML stuff going on that I didn't even recognize that the second line is actually the content of an attribute value! Well, don't use inline event handlers. Bind the event handler with jQuery: learn.jquery.com/events/event-basics. You are already in a JavaScript environment, there is no need to generate JavaScript.

|

vogomatix · Accepted Answer · 2013-11-24 21:10:21Z

1

// this creates the object...

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" 
   });

// now you need to add the params to this
....
// finally put it in place
$('#placeholder').empty().append(obj);

edited Nov 24, 2013 at 21:10

answered Nov 24, 2013 at 18:08

vogomatix

5,1332 gold badges27 silver badges51 bronze badges

4 Comments

user3023566 Over a year ago

How would I add the object though? Maybe if you add that to your code I'd have a better understanding as I'm still a bit jumbled about this. I know now that using a javascript click event would be easier but I am still missing something.

Felix Kling Over a year ago

@user3023566: $('#placeholder').empty().append(obj);

vogomatix Over a year ago

@FelixKling thanks. Unfortunately I'm travelling around a lot and have work so I won't be able to complete it

user3023566 Over a year ago

Hmm...its returning some error. I'll post the code and error.

Collectives™ on Stack Overflow

jQuery event inside jQuery code

2 Answers 2

11 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related