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

<ul>
element is created and occupied by one
<li>
for each member of the array, each containing its respective word. These are given the class
list-group-item-danger
by default, as in Bootstrap.
When clicked, this class should be removed and replaced with
list-group-item-success
.

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

HTML:



<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>
</button>
</span>
</div>
</div>
</div>
</div>
</div>
<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>
</ul>
</div>
</div>


CSS:



.word-filter li{
display: inline;
}


JQuery:



$(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");
li.appendChild(document.createTextNode(this));
ul.appendChild(li);
});
$('#wordFilter').empty();
$('#wordFilter').append(ul);
});
/* Colour Switching Function */
$('div#wordFilter ul li').click(function() {
if($(this).hasClass('list-group-item-success')) {
$(this).addClass('list-group-item-danger');
$(this).removeClass('list-group-item-success');
} else {
$(this).addClass('list-group-item-success');
$(this).removeClass('list-group-item-danger');
}
});
});

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