jQuery Mobile quotes inside quotes inside quotes

Question

I have a situation in jQuery Mobile where I am generating a hyperlink that has quotes inside quotes inside quotes. I've searched other posts for possible solutions, but nothing seems to work. Here is the original code:

$("#char_list").append("<div data-role='collapsible'>
<h4> " + charName + "</h4><p><strong>Number of Actions:</strong> " + charNumActions + 
"</p><a data-role='button' class='edit_button'    
onClick='sessionStorage.setItem('editCharName', '" + charName + "')' 
data-icon='edit' data-iconpos='left'>Edit</a><a data-role='button' id='delete_char_button' 
class='delete_button' data-inline='true' data-icon='delete' data-iconpos='left'>Delete</a></div>");

The problem is with the onclick portion; it produces a syntax error, and I understand the reason why. I used a single quote right after a single quote.

So, after searching these forums, I then tried escaping the second set of quotes like this (putting in just the onclick portion for brevity):

 onClick='sessionStorage.setItem(\"editCharName\", '\"" + charName + "\")'

That doesn't produce a syntax error, but it renders the button useless; I click it and nothing happens at all. So then I tried this, also from this forum:

 onClick='sessionStorage.setItem("editCharName", '"" + charName + "")'

That had the same effect as escaping the quotes. That is, nothing happens when I click the button.

There must be a way to do this. If anyone has any suggestions, please let me know. Thanks!

Answer 1

Like this ?

$("#char_list").append("<div data-role='collapsible'>" +
    "<h4>" + charName + "</h4>" +
    "<p><strong>Number of Actions:</strong>" + charNumActions + "</p>" +
    "<a data-role='button' class='edit_button' data-icon='edit' data-iconpos='left'>Edit</a>" +
    "<a data-role='button' id='delete_char_button' class='delete_button' data-inline='true' data-icon='delete' data-iconpos='left'>Delete</a>" +
    "</div>");

$(document).on('click','.edit_button',function(){
    var charName = $(this).parents('[data-role="collapsible"]').find('h4').html();
    sessionStorage.setItem('editCharName',charName);
});

• Remove that inline JS / Make that in jQuery style
• Do it more readable !