Twitter Bootstrap Question posted in

Why is the jQuery hover method not working in this case? – Twitter bootstrap

I am trying to get a button in the bootstrap popover to change class when I hover over it using jQuery but for some reason, it is not working. I have looked everywhere and I am using the same method as everybody else for hover events in jQuery but, for some reason, it is just not working.

I am trying to change the classes from btn btn-default to btn btn-success on hover. I realize that this could be achieved using CSS(the color change) but this is supposed to work and it is not working and I wanna know why and resolve it.

I am using : Bootstrap 3.3.6, jQuery

The Entire HTML file : 

<!DOCTYPE html>
<html>
<head>
    <title>Easy ToDo</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <!--<script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.native/1.0.2/bootstrap-native.min.js"></script> -->
    <script>
        function checkTaskStatus(checkbox) {
            var tasktext = document.getElementById('tasktext');
            var taskrow = document.getElementById('taskrow');
            if (checkbox.checked){
                taskrow.className = "active";
                tasktext.className = "text-muted";
                tasktext.style.textDecoration = "line-through";
            }
            else {
                document.getElementById("taskrow").className = "warning";
                document.getElementById('tasktext').className = "text-success";
                tasktext.style.textDecoration = "none";
            }
        }

        function changeBtn(button) {
            var temp = button.className;
            if(temp === "btn btn-primary") {
                button.className = "btn btn-danger";
                button.innerText = "Close";
            }
            else {
                button.className = "btn btn-primary";
                button.innerText = "Add New Task";
            }
        }


    </script>

    <script>
        $(document).ready(function(){
            $('[data-toggle="popover"]').popover({
                html: true,
                title: 'New Task',
                trigger: 'click',
                content: function () {
                            return $('.popoverContent').html();
                },
                placement: 'right'
            });


        });
    </script>
    <script>
        $(document).ready(function () {
            $("#btntask").hover(function () {
                $(this).removeClass('btn btn-default');
                $(this).addClass('btn btn-success');
            }, function () {
                $(this).removeClass('btn btn-success');
                $(this).addClass('btn btn-default');
            });
        });

    </script>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <h1 style="border: 2px solid rebeccapurple; margin-top: 0; background-color: rebeccapurple; color: white; padding-left: 0.6em; padding-bottom: 0.1em; margin-bottom: 1.5em;">An Easy To - Do Web App!</h1>


       <button type="button" class="btn btn-primary" style="margin-bottom: 15px; margin-left: 10px;" data-toggle="popover" onclick="changeBtn(this)">Add New Task</button>
        <div class="popoverContent hide">
            <label for="newTask">Task:</label>
            <textarea rows="3" name="newTask" class="form-control input-lg" placeholder="Task HTML"></textarea>
            <button class="btn btn-default" type="submit" style="margin-top: 10px;" id="btntask">Done</button>
        </div>

        <table class="table table-bordered">
            <thead>
                <tr>
                    <th style="width: auto"> </th>
                    <th style="width: auto">#</th>
                    <th style="width: auto">Date</th>
                    <th style="width: auto">Task</th>
                    <th style="width: auto">Notes</th>
                </tr>
            </thead>
            <tbody>
                <tr class="warning" id="taskrow">
                    <td><div class="checkbox"><label><input type="checkbox" onclick="checkTaskStatus(this)"></label></div></td>

                    <td scope="row" style="font-weight: bold;">1</td>

                    <td><p style="font-style: italic; font-weight: bold;">7th May, 2016</p></td>

                    <td class="text-success" id="tasktext" style="text-decoration: none;"><h5 id="task-heading" style="margin-top: 0; text-decoration: underline; font-weight: bold;">Tesla Share Purchase Reasearch:</h5>
                        <ul>
                            <li>Find out how an Australian citizen can purchase shares in an American company (e.g. Tesla) which is not listed on the ASX (Australian Stock Exchange)</li>
                            <li>Prepare a brief list of the steps, costs and general time frame for an Australian to get set up to purchase share in American companies</li>
                            <li>Please also state the current stock price of Apple, Google (potentially Alphabet as they are the parent??), Facebook, Twitter and Tesla</li>
                            <li>Bullet points are fine</li>
                            <li>Please include any relevant links</li>
                            <li>Spend no longer than 1.5 – 2 hours on this</li>
                        </ul>
                    </td>

                    <td><div class="form-group">
                            <textarea class="form-control input-md" rows="4" placeholder="Notes"></textarea>
                            <button class="btn btn-default btn-block" type="submit" style="margin-top: 10px;">Save</button>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>



</div>

</body>
</html>

Note that, I am fairly new to jQuery and JS so if there is any inaccuracies on my part, please point them out.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    As pointed out by @Sukhmeet Singh the popover did not appear until on click and not on document.ready.

    So I tweaked my script from :

            $(document).ready(function () {
            $("#btntask").hover(function () {
                $(this).removeClass('btn btn-default');
                $(this).addClass('btn btn-success');
            }, function () {
                $(this).removeClass('btn btn-success');
                $(this).addClass('btn btn-default');
            });
        });

    To : 

    $(document).ready(function () {
            $('[data-toggle="popover"]').on('click', function () {
                $("#btntask").hover(function () {
                    $(this).removeClass('btn btn-default');
                    $(this).addClass('btn btn-success');
                }, function () {
                    $(this).removeClass('btn btn-success');
                    $(this).addClass('btn btn-default');
                });
            });
        });

    And it worked. The popover is non-existent in document.ready but appears there when I click on the button with the property [data-toggle="popover"] and thus, when I target the button I want to highlight then, it does it.


  2. 0

    The issue is when you are trying to add the hover state on the popover , the popover element is not yet available. The element is only added when you click. Hence, the function in $(document).ready() actually adds no hover state.
    Instead use jQuery .on

    Login or Signup to reply.
  3. 0

    If your hover has not much work to do, you can opt for css hover

    #element:hover
{
    /*Add your css after hover here*/
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search