Skip to content
maxkfranz edited this page Mar 8, 2012 · 5 revisions

eles.live()

Add a callback function to be called every time an event occurs for any element that ever matches the current top-level selector.

eles.live( eventType [, eventData], function(eventObject) )

Runs a callback function whenever the specified event occurs for any element in the graph matching the current top-level selector of the collection

eventType A space-separated list of event types to bind to the elements
eventData A map of extra data to put in eventObject.data
function(eventObject) The callback function to be executed when the event occurs

Details

This function only works on top level selectors. That means that this function works only on collections gotten from the core with a top-level selector.

A top level selector is one that used on one of the collection-getting functions of cy. See cy.elements(), cy.filter(), cy.nodes(), and cy.edges().

For example:

cy.nodes().live("click", function(){ /* works */ });
cy.nodes("[foo = 1]").live("click", function(){ /* works */ });
cy.elements("[foo = 1]").live("click", function(){ /* works */ });

// these don't work
cy.elements().filter("[foo = 1]").live("click", function(){ /* selector isn't top-level */ });
cy.elements().nodes().live("click", function(){ /* selector isn't top-level */ });
cy.elements().filter(function(){
  return Math.random() > 0.5;
}).live("click", function(){ /* filter functions don't work */ });

Examples

Bind to mouse clicks:

cy.nodes().live("click", function(event){
  var id = this.data("id"); // `this` holds the reference to the element that triggered the event
  console.log( "Clicked node %s", id );
});

Change the color of nodes with weight greater than 50 to red on click:

cy.nodes("[weight > 50]").bind("click", function(){
  this.bypass("fillColor", "red");
});

cy.add({
  group: "nodes",
  data: { weight: 55, id: "newNode" }
});

cy.nodes("#newNode").click(); // newNode is red

Clone this wiki locally