Save events for dynamically changing items

Question

goal

A good and final way to recall functions after something has happened.

Problem

I work with some functions that you need to remember when something happens. A simple example is a button similar to the following Twitter button.

So far, all is well. But I do not know how to remember. Actually, I already tried to use $.getScript jQuery, but it causes a lot of requests to the server, and I don’t feel comfortable with this behavior.

To illustrate the problem, I made this jsFiddle . When you hover the button for the first time, its style will change. When you click on it and click again, the "hover behavior" disappears.

I really don't know how to act.

$.getScript Is this the best solution for this?

Anyone have a suggestion?

Code (if jsFiddle down)

The knockout in the code is just an example, and it does not matter. I want to do this with ajax calls and all that is possible.

HTML:

 <div class="container"> <!-- ko if: isAdded --> <button class="btn primary" data-bind="click: add">Add Xbox 360</button> <!-- /ko --> <!-- ko ifnot: isAdded --> <button class="btn btn-success primary remove" data-bind="click: remove">Xbox 360 already added</button> <!-- /ko --> </div> 

JavaScript:

 $("button.remove").hover(function() { $(this) .removeClass("btn-success") .addClass("btn-danger") .text("Click here to remove"); }, function() { $(this) .removeClass("btn-danger") .addClass("btn-success") .text("Xbox 360 already added"); }); ViewModel = function() { var self = this; self.isAdded = ko.observable(false); self.add = function(item) { item.isAdded(false); }; self.remove = function(item) { item.isAdded(true); }; }; ko.applyBindings(new ViewModel()); 

Answer 1

You will need to use delegated events that will remain connected when adding / removing / modifying elements on the page. See the documenation document for the jQuery on () function for more information on event delegation.

Note that this means that you will need to use the mouseenter and mouseleave instead of the hover() method (which is just a wrapper for connecting listeners for mouseenter and mouseleave )

 $(document).on('mouseenter', "button.remove", function() { $(this) .removeClass("btn-success") .addClass("btn-danger") .text("Click here to remove"); }).on('mouseleave', 'button.remove', function() { $(this) .removeClass("btn-danger") .addClass("btn-success") .text("Xbox 360 already added"); }); 

Working demo

Answer 2

You need to use event delegation so that the handler is bound to current and future elements:

 $('.container').on('mouseenter', 'button.remove', function() { ... }).on('mouseleave', 'button.remove', function() { ... }); 

http://jsfiddle.net/2KUp8/5/

Read more about event delegation here .

Answer 3

You can use the on method for dynamically added elements.

 $(document).on("mouseover", "button.remove", function(e) { $(this) .removeClass("btn-success") .addClass("btn-danger") .text("Click here to remove"); }); $(document).on("mouseleave", "button.remove", function(e) { $(this) .removeClass("btn-danger") .addClass("btn-success") .text("Xbox 360 already added"); }); 

Fiddle