Hi all,

I'm working on a little project that gives you synonyms for your sentence that uses Twitter Bootstrap. Everything is working all right, but I can't seem to change elements within the Popover! What's odd, however, is that when I used jQuery.length on the desired element, it told me the correct number. Here is my code (I know it's probably inefficient):

index.php:

<!DOCTYPE html>

<html>

    <head>

        <link rel="stylesheet" type="text/css" href="/resources/includes/bootstrap/css/bootstrap.min.css" />

        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript" src="/resources/includes/bootstrap/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="/resources/includes/bootstrap/js/bootstrap-transition.js"></script>
        <script type="text/javascript" src="/resources/includes/bootstrap/js/bootstrap-tooltip.js"></script>
        <script type="text/javascript" src="/resources/includes/bootstrap/js/bootstrap-popover.js"></script>
        <script type="text/javascript" src="/resources/includes/bootstrap/js/bootstrap-dropdown.js"></script>

        <script type="text/javascript">

            var words = new Array();

            $(document).ready(function () {

                $(".helper").hide();

                $("#submit").on ({

                    click:function () {

                        if ($(this).text() == "Generate!") {

                            $("#output").hide(1000);
                            $("#clear").hide(500);

                            $(this).addClass("disabled");
                            $(this).text("Working...");

                            $("#syn").hide(500, function() {

                                $.post("/portfolio/syn/syn.php", { sentence:$("#syn").val() }, function (data) {

                                    $("#output").html(data);

                                    $("#output").show(700, function () {

                                        $(".submit").removeClass("disabled");
                                        $(".submit").text("Reenter");

                                    });

                                });

                            });

                        }
                        else {

                            $("#output").hide(1000, function() {

                                $(".submit").text("Generate!");
                                $("#clear").show(500);
                                $("#syn").show(500);

                            });

                        }

                    }

                })

                $("#clear").on ({

                    click:function() {

                        $("#syn").val("");

                    }

                })

            });

        </script>

    </head>

    <body>

        <div id="container-fluid">

            <textarea id="syn" rows="7" class="input-xxlarge"></textarea>
            <div id="output"></div>
            <br />

            <button class="btn btn-large" type="button" id="clear">Clear</button>
            <button class="btn btn-large" type="button" data-target="#help" data-toggle="modal">Help</button>

            <div class="modal hide fade in" id="help" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-header">
                    <h3 id="myModalLabel">Help</h3>
                </div>
                <div class="modal-body">
                    <p>This is the help.</p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary" data-dismiss="modal">Close</button>
                </div>
            </div>

            <button class="btn btn-large btn-primary submit" type="button" id="submit">Generate!</button>

            <br />
            <br />

        </div>

    </body>

</html>

syn.php:

        <script type="text/javascript">

            $(document).ready(function () {

                var clicked = false;

                $(".helper").hide();

                $(".word").each(function () {

                    $(this).popover({content:$(".helper." + $(this).data("word")).html(), html:true, placement:"bottom"});

                });

                // this line isn't working!
                $(".replaced").click(function() {

                    alert("Yeah!");

                });

            });

        </script>

<?php

    $sentence = sanitize($_POST["sentence"]);

    $words = explode(" ", $sentence);

    foreach ($words as $word)
    {
        $test = @json_decode(file_get_contents("http://words.bighugelabs.com/api/2/d30d1afd53590710f2a092db0022068f/$word/json"), true);

        if ($test != FALSE)
            echo "<button class=\"word btn btn-warning btn-large $word\" data-word=\"$word\" type=\"button\" data-original-title=\"Words Found\">$word</button>";
        else echo "<button class=\"word btn btn-warning disabled btn-large $word\" type=\"button\">$word</button>";

        echo "&nbsp;";

        if ($test != FALSE)
        {           
            echo "<span class=\"helper $word\">";    

                echo "<span class=\"overflow\" style=\"overflow:hidden;width:30px;\">";

                    if (!empty($test["noun"]["syn"]))
                    {
                        foreach ($test["noun"]["syn"] as $key)
                            echo "<button class=\"replaced btn btn-primary $key\" type=\"button\"> $key <br /> </button> <br />";
                    }
                    if (!empty($test["verb"]["syn"]))
                    {
                        foreach ($test["verb"]["syn"] as $key)
                            echo "<button class=\"replaced btn btn-primary $key\" type=\"button\"> $key <br /> </button> <br />";
                    }
                    if (!empty($test["adjective"]["syn"]))
                    {
                        foreach ($test["adjective"]["syn"] as $key)
                            echo "<button class=\"replaced btn btn-primary $key\" type=\"button\"> $key <br /> </button> <br />";
                    }

                echo "</span>";

            echo "</span>";
        }
    }

    function sanitize($sentence)
    {
        $sentence = strip_tags($sentence);
        $sentence = htmlentities($sentence);
        $sentence = preg_replace("!\s+!", " ", $sentence);
        $sentence = trim($sentence);
        return $sentence;
    }
?>

I have commented the line that isn't working. Help will be HUGELY appreciated.

Try using live:

 $(".replaced").live("click", function() {

    alert("Yeah!");

 });

Using 'click' will only attach handlers to existing objects. Using 'live' it'll attach the handlers to any existing object and also for objects created latter.

This works, thanks!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.