Start New Discussion within our Web Development Community

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 question has already been answered. Start a new discussion instead.