Jquery add attribute to element on hover

Question

Feeling like I'm the cusp of understanding Jqueries selectors and element handling - just not quite there yet!

The following html is being cloned so the user can add different issues, what I'm trying to do is add the class results to the last div so that I can display the results in the correct div. But when I hover over the element nothing changes, no javascript errors are being flagged so I presume its a case of my targeting the wrong element with my cack handed code.

Itd be really useful if someone could point me in the right direction for a decent tutorial on jquery selectors, have been reviewing the developer docs but without someone standing over my shoulder explaining stuff, some of the concepts and terminology can be hard to get your head round.

<div id="title-wrap1" style="margin-bottom:4px;" class="clonedInput">
    <select name="Issues[]">
        <option selected>Please Select...</option>
            <?php
            while($res = $title->fetch(PDO::FETCH_ASSOC)) { 
                echo "<option value=\"".$res['ID']."\">".$res['Issue']."</option>\n  ";
            }
            ?>
    </select>
    <div>
    </div>
</div>
<div>
    <input type="button" class="btnAdd" value="+" />
    <input type="button" class="btnDel" value="-" />
</div>

This is my Javascript code

$(".clonedInput select").hover(
    function () {
        $('.clonedInput div', this).attr('class', 'results');
    });

    $(document).on('change','.clonedInput select',function() {
    var data = {id: $(this).val()};
    $.post('sub_db_handler.php', data, processResponse);
        // var num =  $('.clonedInput').length;

        function processResponse(data) {
            $('.clonedInput .results').html(data);
        };
});

Works if I put it in the Select change handler: But my issue is still targeting the current element, im going about this the wrong way. — Funk247
– Funk247, Commented May 17, 2013 at 10:06

Arun P Johny · Accepted Answer · 2013-05-17 09:58:10Z

1

I'm having a relook at your problem, you are using the the hover function to mark the div to accept the result. It can be done slightly differently

$(document).on('change','.clonedInput select',function() {
    var data = {id: $(this).val()};

    $.post('sub_db_handler.php', data, $.proxy(processResponse, this));

    function processResponse(data) {
        $(this).closest('.clonedInput').find('div').html(data);
        //or $(this).next().html(data); as DerekHenderson pointed out
    };
});

If you still want to add the result class

$(".clonedInput select").hover(
    function () {
        $(this).closest('.clonedInput').find('div').addClass('class', 'results');
    }
);

answered May 17, 2013 at 9:58

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Derek Henderson Over a year ago

or just $(this).next(), since they're siblings.

Funk247 Over a year ago

$(this).closest('.clonedInput').find('div').html(data); Was exactly what I was looking for, I was unsure of the syntax and terminology, many thanks :)

Tomaszeek · Accepted Answer · 2013-05-17 10:03:13Z

0

If you don't get any errors that might mean that your script is not executed. I would try to do something like this:

  $(document).ready(function () {
   $(".clonedInput select").mouseover(function() {
            $('.clonedInput div', this).attr('class', 'results');
          }
        );

    $(document).on('change','.clonedInput select',function() {
        var data = {id: $(this).val()};
        $.post('sub_db_handler.php', data, processResponse);
        // var num =  $('.clonedInput').length;

        function processResponse(data) {
            $('.clonedInput .results').html(data);
        };
    });
    })

answered May 17, 2013 at 10:03

Tomaszeek

5231 gold badge4 silver badges11 bronze badges

Collectives™ on Stack Overflow

Jquery add attribute to element on hover

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related