Add dynamic HTML content to page with onclick event

StackOverflow https://stackoverflow.com/questions/16968307

Question

A database is giving me several divs to add to the DOM.

These <divs> have classes and onclick events already generated by the database.

I tried using jQuery and javascript by itself. The problem I'm getting with both is a conflict in quotes. When declaring the var -- or if I do .html('dynamicinfo') or innerhtml('dynamicinfo') -- I'm using the ' character already at begining and end, so when the onclick syntax uses the ' character as well... things stop working....

Any ideas on how to make this work?

The jQuery looks something like this. (Note that the info variable in production use contains many divs, each with a different link)

         $(document).ready(function() {
            var info = $('<div class="mainFixedButton mr2 mc3 mainDynamicButtons" onclick="window.location='http://www.google.com'">From $399.99</div>');
            $("#number_pad").remove();
            $("#mainDynamicButtonContainer").html(info);
         });

<body>

    <div id="main_buttons">
        <div class="mainButtonContainer">
            <div id="mainDynamicButtonContainer"></div>
        </div>
    </div>

</body>
Was it helpful?

Solution

Escape the quotes: 

var info = $('<div ... onclick="window.location=\'http://www.google.com\'">From $399.99</div>');
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top