Need Help jQuery table rows swapping with click event

Discussion in 'jQuery' started by ZEDGR, Jul 29, 2013.

  1. #1
    This code works only once after I click again it does nothing. I don't know what's going on any help will be appreciated.


    This is the html code
    <!DOCTYPE html>
    <html>
        <head>
            <style>
                tr {
                    background-color: blue;
                    color: white;
                }
            </style>
            <meta charset="utf-8">
            <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
            <script src='script.js'></script>
            <title>This is a jquery test</title>
        </head>
        <body>
            <table>
                <tbody>
                    <tr id="1"><td>1</td><td>Hello World1</td><td>Mpol</td></tr>
                    <tr id="2" ><td>2</td><td>Trololololo</td><td>Lalalalala</td></tr>
                    <tr id="3"><td>3</td><td>Let's go</td><td>Fail</td></tr>
                </tbody>
            </table>
        </body>
    </html>
    HTML:
    and this is script.js file

    $(document).ready(function() {
     
        selected = 0;
        $("tr td").click(function()
        {
            if(selected != 0)
            {
                $("tr#"+id).html($(this).parent().html());
                $(this).parent().html(inner);
                $("tr#"+id).removeAttr('style');
                selected = 0;
            }
            else
            {
                inner = $(this).parent().html();
                id = $(this).parent().attr("id");
                $(this).parent().css("background-color", "green");
                selected = 1;
            }
        });
    });
    HTML:

     
    Solved! View solution.
    Last edited: Jul 29, 2013
    ZEDGR, Jul 29, 2013 IP
  2. #2
    This is happening because you are changing the mark up after the dom has loaded. You need to use on to fix this.

    API docs: http://api.jquery.com/on/

    Fixed code:
    
    $(document).ready(function() {
     
        selected = 0;
        $(document).on('click', 'tr td', function()
        {
            if(selected != 0)
            {
                $("tr#"+id).html($(this).parent().html());
                $(this).parent().html(inner);
                $("tr#"+id).removeAttr('style');
                selected = 0;
            }
            else
            {
                inner = $(this).parent().html();
                id = $(this).parent().attr("id");
                $(this).parent().css("background-color", "green");
                selected = 1;
            }
        });
     
    });
    
    Code (markup):
    Hope it helps.
     
    HuggyStudios, Jul 31, 2013 IP