harunB10 harunB10 - 4 months ago 9
HTML Question

Div class not working inside jQuery but works outside

I have a problem with div appending with jQuery. When I test it outside of a script, it works perfectly fine, but nothing is showing when div is inside jQuery.

$('#id').append("<tr><td><div class='rate2' data-rate-value = '4'></div></td></tr>");


I am using this rating system - http://auxiliary.github.io/rater/

For example, this also works:

$('#id').append("<tr><td><div>Something</div></td></tr>");

Answer

You should first add your div then add rate method.

$('#id').append("<tr><td><div class='rate2' data-rate-value = '4'></div></td></tr>");

$(.rate2).rate();

If you write rate method before initializing the div will not show anything.

I downloaded the rater library and this code is working on me.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

    <script src="http://code.jquery.com/jquery-1.11.3.min.js" charset="utf-8"></script>
    <script src="rater.js" charset="utf-8"></script>
    <script>
        $(document).ready(function(){

           $('#id').append("<tr><td><div class='rate' data-rate-value = '4'></div></td></tr>");

           $(".rate").rate();   

        });

    </script>

</head>
<body>

    <div id="id">

    </div>

</body>
</html>