CODEWITHSUNDEEP
javascripthtmlcss
Vithushan
Vithushan

Reputation: 513

moving list function not working properly

I want the my application to do the following. There are 2 ordered list. One with elements and the other empty. When i hover over the firstlist next to text an image must appear and when i click the image that text must move to the other ordered list. If i click on the text nothing must happen. According to what i did when i click first time everything works properly. If i click on text i wont move and when i click on image i moves. but after that everything goes wrong. When i click image it displays twice what i select and when i click 3rd time it displays thrice what i select and after first selection im able to click on text to move it to the other list. Please help me sort out this problem. Thanks in advance. 

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Example</title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">

        <script type = "text/javascript" src = "js/jquery.js"></script>
        <script type = "text/javascript" src = "js/jquery_ui.js"></script>

        <link rel="stylesheet" href="/resources/demos/style.css">

        <style>
            #feedback { font-size: 1.4em; }
            #firstlist .ui-selecting { background: #FECA40; }
            #firstlist .ui-selected { background: #F39814; color: white; }
            #firstlist { list-style-type: none; margin: 0; padding: 0; width: 20%; }
            #firstlist li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
            #firstlist li:hover img { display: block; }

            #seclist .ui-selecting { background: #FECA40; }
            #seclist .ui-selected { background: #F39814; color: white; }
            #seclist { list-style-type: none; margin: 0; padding: 0; width: 20%; }
            #seclist li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }

            img
            {
                position:relative;
                left:232px;
                top:-25px;
                display:none;
            }
        </style>
    </head>

    <body>

        <table id="myTable">
            <td>
                <tr>
                    <ol id="firstlist">
                        <li>Item 1 <img src="next.jpg" id="next1"></li>
                        <li>Item 2 <img src="next.jpg" id="next2"></li>
                        <li>Item 3 <img src="next.jpg" id="next3"></li>
                        <li>Item 4 <img src="next.jpg" id="next4"></li>
                        <li>Item 5 <img src="next.jpg" id="next5"></li>
                    </ol>
                </tr>

                <tr>
                    <ul class = "seclist" id = "seclist">
                    </ul>
                </tr>
            </td>
        </table>

        <script language="javascript">
            //function to display the immage
            function show(id,disp) {
                if (disp == true) {
                    id.style.display = "block";
                }

                if (disp == false) {
                    id.style.display = "none";
                }
            }
        </script>

        <script>        
            $(function(){
                $( "#firstlist" ).selectable();
            });

            $(function() {
                $( "#seclist" ).selectable();
            });

            $("img").click(function() {
                $('#firstlist li').click(function(){
                    var $this = $(this),
                    text = $this.text();
                    $('<li />', {html: text}).appendTo('ul.seclist')
                });
            });
        </script>
    </body>
</html>

Upvotes: 0

Views: 72

Answers (2)

user3996959
user3996959

Reputation: 

$("img").click(function() { 
    var text = $(this).closest("li").text(); 
    $('<li />', {html: text}).appendTo('ul.seclist') 
});

This might work. Please try it out

Upvotes: 1

Cameron
Cameron

Reputation: 587

You've mistakenly nested your event handlers. Each time you click <img> it is attaching a new event handler to #firstlist li, which will fire an event each time anything (including your img tag) in your <li> is clicked. Each time you click the <img> tag it attaches a new event (without clearing the old ones) and also triggers the existing attached events. This is why on the first click you get no response, the second time it triggers once, the third time it happens twice, and so on.

Try changing this:

$("img").click(function() {
    $('#firstlist li').click(function(){
        var $this = $(this),
        text = $this.text();
        $('<li />', {html: text}).appendTo('ul.seclist')
    });
});

To this:

$('#firstlist li img').click(function(){
    var $this = $(this),
    text = $this.parent().text();
    $('<li />', {html: text}).appendTo('ul.seclist')
});

Upvotes: 1

Related Questions