Unable to click button after appendTo

Question

I'm basically trying to move one list item back-and-forth from one unordered list to another, pretty basic stuff. I can click once, so it receives a new class ("squad-btn") and gets rid of his old one ("player-btn") and correctly moves to the other list (squad-list).

Problem is I can't move it back once it has joined this new list. My removal and creation of classes seems fine to me. What's wrong here?

$(document).ready(function() {

    $(".player-btn").click(function() { 
        $(this).appendTo("#squad-list");
        $(this).addClass("squad-btn");
        $(this).removeClass("player-btn");
    });

    $(".squad-btn").click(function () {
        $(this).appendTo("#player-list");
        $(this).addClass("player-btn");
        $(this).removeClass("squad-btn");
    });

});

And my html file:

<style type="text/css">

    #content-box {
        width: 400px;
        height: 600px;
    }
    #player-box {

        vertical-align: middle;
        height: 600px;
        width: 200px;
        background-color: green;
    }

    #squad-box { 

        height: 600px;
        width: 200px;
        background-color: blue;
    } 

    li {

        list-style-type: none;
        padding-top: 20px;
    }
</style>

<html>

<head>


    <link href="https://daneden.github.io/animate.css/animate.min.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


</head>

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

<body>

    <div class = "container-fluid text-center">

        <div align = "center">

        <h1>Squad Builder</h1>


        <div id = "content-box">

            <div id = "player-box" class = "col-md-6">

                <ul id = "player-list">

                    <li class = "player-btn"><button>Messi</button></li>

                </ul>

            </div>

            <div id = "squad-box" class = "col-md-6">

                <ul id = "squad-list">


                </ul>

            </div>

        </div>

        </div>

    </div>

</body>

</html>

Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Taplar, Apr 09 '18 at 21:30
Direct bindings are attached to elements. Changing the elements after the fact **does not** change the event handlers bound to them. This is a form of the binding on dynamic elements issue. — Taplar, Apr 09 '18 at 21:31

score 0 · Accepted Answer · answered Apr 09 '18 at 21:35

You need to unbind the previous click handler, and rebind it to the correct handler - once an event handler is bound, it's not going to check the class list every time, it is simply bound to that element.

You could do it like this:

$(document).ready(function() {
  function handlePlayerButtonClick() {
      $(this).appendTo("#squad-list");
      $(this).addClass("squad-btn");
      $(this).removeClass("player-btn");
      $(this).off('click').on('click', handleSquadButtonClick);
  }

  function handleSquadButtonClick() {
      $(this).appendTo("#player-list");
      $(this).addClass("player-btn");
      $(this).removeClass("squad-btn");
      $(this).off('click').on('click', handlePlayerButtonClick);
  }

  $(".player-btn").on('click', handlePlayerButtonClick);
  $(".squad-btn").on('click', handleSquadButtonClick);
});

Using a delegate event binding will allow you to avoid juggling event handlers like this. @RodrigoVeiga — Taplar, Apr 09 '18 at 22:07

Unable to click button after appendTo

1 Answers1