Nobody Nobody - 4 years ago 96
CSS Question

JQuery: Change the class of a dynamically-created <li> element when clicked

When a user types, the text is turned into an array, separated by " ". A

element is created and occupied by one
for each member of the array, each containing its respective word. These are given the class
by default, as in Bootstrap.
When clicked, this class should be removed and replaced with

There is a default
element. The
members within it respond as expected, with the colour changing when clicked. However, once those are removed and the dynamically created
elements are inserted, they no longer function and remain with the
class which they already had.


<div class="jumbotron">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1">
<div class="input-group">
<input id="wordsearch" type="text" class="form-control wordsearch" placeholder="" />
<span id="go" class="input-group-btn">
<button class="btn btn-default" type="submit">
<span class="glyphicon glyphicon-search"></span>
<div class="container">
<div id="wordFilter">
<ul class="list-group word-filter">
<li class="list-group-item list-group-item-danger">Your</li>
<li class="list-group-item list-group-item-danger">words</li>
<li class="list-group-item list-group-item-danger">appear</li>
<li class="list-group-item list-group-item-danger">here</li>
<li class="list-group-item list-group-item-danger">as</li>
<li class="list-group-item list-group-item-danger">you</li>
<li class="list-group-item list-group-item-danger">type.</li>


.word-filter li{
display: inline;


$(document).ready(function() {
$('#wordsearch').keyup(function() {
var inputVal = $('#wordsearch').val();
var inputs = inputVal.split(" ");
var ul = document.createElement("ul");
ul.setAttribute("class", "list-group word-filter");
$(inputs).each(function() {
var li = document.createElement("li");
li.setAttribute("class", "list-group-item list-group-item-danger");
/* Colour Switching Function */
$('div#wordFilter ul li').click(function() {
if($(this).hasClass('list-group-item-success')) {
} else {

Answer Source

Consider using the on() function to handle wiring up events for dynamically created elements :

// This will handle any current and future click events
// for elements that match this selector
$('#wordFilter').on('click','ul li', function() {
    // Equivalent code to your previous statements
    $(this).toggleClass('list-group-item-success list-group-item-danger');

The click() function operates differently from this and will only wire up the event for those that currently exist at the time of the function call.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download