CODEWITHSUNDEEP
jquery
runucegop
runucegop

Reputation: 103

How to stop appending a div on hover?

I am appending a div on hover therefore it gets added all the time. How do I stop it from adding and just display/hide when the cursor hovers over the element?

$('#submit-question-dropdown').hover(function() {
  $('#submit-question-dropdown').append(`<div class="row" style='position:absolute;right:50px;background-color:red;z-index:5;padding:20px;top:70px;'><div id="addQuestion" style="float:left;" class="col-sm-6"><h3 style="margin-bottom:15px;">Submit question</h3><form onsubmit="createQuestion(quizType, $('#submitQ').val(), $('#submitA1').val(), $('#submitA2').val(), $('#submitA3').val(), $('#submitA4').val(), $('#submitCorrect').val(), $('#submitExpl').val(), $('#submitAuthor').val(), $('#submitDesc').val(), $('#submitDate').val());return false;"method="POST"><label style="margin-right:30px;" for="add-banking-question"><input class="form-control" id="add-banking-question" type="radio" name="add-q-quizType" value="BankingQuizQuestion" checked>Investment Banking</label><label for="add-trading-question"><input class="form-control" id="add-trading-question" type="radio" name="add-q-quizType" value="TradingQuizQuestion">Sales & Trading</label><input style="margin-top:10px;" class="form-control" type="text" id="submitQ" placeholder="Question" name="addq-q"><input class="form-control" type="text" id="submitA1" placeholder="Answer 1" name="addq-a1"><input class="form-control" type="text" id="submitA2" placeholder="Answer 2" name="addq-a2"><input class="form-control" type="text" id="submitA3" placeholder="Answer 3" name="addq-a3"><input class="form-control" type="text" id="submitA4" placeholder="Answer 4" name="addq-a4"><input class="form-control" type="text" id="submitCorrect" placeholder="Correct answer index" name="addq-correct"><input class="form-control" type="text" id="submitDesc" placeholder="Short description" name="addq-desc"><textarea class="form-control" type="text" id="submitExpl" placeholder="Explanation" name="addq-expl"></textarea><input class="form-control" type="text" id="submitAuthor" placeholder="Your name" name="addq-author"><input class="form-control" type="text" hidden id="submitDate" name="addq-date"><input class="btn btn-primary" type="submit" value="Send" style='width:100%;'><div hidden id="success-submit">Thanks! We will review your question in 48 hours.</div></form></div></div>`)
})

Upvotes: 0

Views: 42

Answers (3)

RAUSHAN KUMAR
RAUSHAN KUMAR

Reputation: 6006

You can perform a check whether the div is already present or not. Based on that you can add and remove the div. Use like this

$('#submit-question-dropdown').hover(function() {

    if( $('#submit-question-dropdown').find('.row').length == 0 )
    {
        $('#submit-question-dropdown').append('<div class="row" style='position:absolute;right:50px;background-color:red;z-index:5;padding:20px;top:70px;'><div id="addQuestion" style="float:left;" class="col-sm-6"><h3 style="margin-bottom:15px;">Submit question</h3><form onsubmit="createQuestion(quizType, $('#submitQ').val(), $('#submitA1').val(), $('#submitA2').val(), $('#submitA3').val(), $('#submitA4').val(), $('#submitCorrect').val(), $('#submitExpl').val(), $('#submitAuthor').val(), $('#submitDesc').val(), $('#submitDate').val());return false;"method="POST"><label style="margin-right:30px;" for="add-banking-question"><input class="form-control" id="add-banking-question" type="radio" name="add-q-quizType" value="BankingQuizQuestion" checked>Investment Banking</label><label for="add-trading-question"><input class="form-control" id="add-trading-question" type="radio" name="add-q-quizType" value="TradingQuizQuestion">Sales & Trading</label><input style="margin-top:10px;" class="form-control" type="text" id="submitQ" placeholder="Question" name="addq-q"><input class="form-control" type="text" id="submitA1" placeholder="Answer 1" name="addq-a1"><input class="form-control" type="text" id="submitA2" placeholder="Answer 2" name="addq-a2"><input class="form-control" type="text" id="submitA3" placeholder="Answer 3" name="addq-a3"><input class="form-control" type="text" id="submitA4" placeholder="Answer 4" name="addq-a4"><input class="form-control" type="text" id="submitCorrect" placeholder="Correct answer index" name="addq-correct"><input class="form-control" type="text" id="submitDesc" placeholder="Short description" name="addq-desc"><textarea class="form-control" type="text" id="submitExpl" placeholder="Explanation" name="addq-expl"></textarea><input class="form-control" type="text" id="submitAuthor" placeholder="Your name" name="addq-author"><input class="form-control" type="text" hidden id="submitDate" name="addq-date"><input class="btn btn-primary" type="submit" value="Send" style='width:100%;'><div hidden id="success-submit">Thanks! We will review your question in 48 hours.</div></form></div></div>');
    }
    else
    {
        $('#submit-question-dropdown').find('.row:first').remove();
    }

});

Upvotes: 1

Marco Salerno
Marco Salerno

Reputation: 5203

This is how to do what you want (you must fill the append function, it was too long i had to cut):

    var done = false;
    $('#submit-question-dropdown').hover(function() {
        if (done == false)
        {
            $('#submit-question-dropdown').append();
            done = true;
        }
        $(this).hide();
    });
    $( "#submit-question-dropdown" ).mouseout(function() {
        $(this).show();
    });

Upvotes: 1

Mayank Pandeyz
Mayank Pandeyz

Reputation: 26258

Try this:

$('#submit-question-dropdown').hover(function() {

    if( $('#submit-question-dropdown').find('.row').length == 0 )
    {
        // No div is there, append it
    }
    else
    {
        // hide/show it
    }

});

Upvotes: 1

Related Questions