Weird jquery quotes issue

Question

I'm writing a function that activates when you click on a prediction from bootstrap's typeahead function. This function passes a word value and the desired language to a text-to-speech function.

This text-to-speech function works properly, but I'm stuck with passing bootstrap's prediction s to this function.

The console logs "syntax error on line 1", and I believe it's because of a quotes problem in the append function

I hope someone here can help me to set the quotes correctly.

$('#search-box').bind('typeahead:selected', function(obj, value)
{
   console.log(value.value);
  $('#resultaten').append('<a href="#" onClick="praten("value.value", "nl")">' + value.value + '\&nbsp;<img src="img/speaker.png" alt="speaker"/></a><br />');
});

Answer 1

You need to escape the quotes in your onclick:

$('#search-box').bind('typeahead:selected', function(obj, value) {
                console.log(value.value);
                $('#resultaten').append('<a href="#" onClick="praten(&quot;value.value&quot;, &quot;nl&quot;)">' + value.value + '\
        &nbsp;<img src="img/speaker.png" alt="speaker"/></a><br />');
            });

Or else use apostrophes:

$('#search-box').bind('typeahead:selected', function(obj, value)
{
   console.log(value.value);
  $('#resultaten').append('<a href="#" onClick="praten(\'value.value\', \'nl\')">' + value.value + '\&nbsp;<img src="img/speaker.png" alt="speaker"/></a><br />');
});

Also, if you're using jQuery, you don't need an onclick handler at all:

$('#search-box').bind('typeahead:selected', function(obj, value)
{
    $('#resultaten').append('<a href="#" '+value.value+'\&nbsp;<img src="img/speaker.png" alt="speaker"/></a><br />')
                    .click(function() {
                        praten(value.value, "n1");
                    });
};