Skip to content
This repository has been archived by the owner on Dec 11, 2022. It is now read-only.

Commit

Permalink
Removed overloads which duplicate jQuery's native $.live
Browse files Browse the repository at this point in the history
  • Loading branch information
Alexander Zaytsev committed Apr 10, 2012
1 parent 18db059 commit 20efab2
Show file tree
Hide file tree
Showing 5 changed files with 32 additions and 221 deletions.
4 changes: 4 additions & 0 deletions ChangeLog.markdown
View file
@@ -1,5 +1,9 @@
# Live Query ChangeLog

## 1.2

* Removed overloads which duplicate jQuery's native [$.live](http://api.jquery.com/live/)

## 1.1.1

* Compatibility fix with 1.4.1 (thanks)
Expand Down
50 changes: 7 additions & 43 deletions README.markdown
View file
@@ -1,27 +1,8 @@
# Live Query

Live Query utilizes the power of jQuery selectors by binding events or firing callbacks for matched elements auto-magically, even after the page has been loaded and the DOM updated.
Live Query utilizes the power of jQuery selectors by firing callbacks for matched elements auto-magically, even after the page has been loaded and the DOM updated.

For example you could use the following code to bind a click event to all A tags, even any A tags you might add via AJAX.

$('a')
.livequery('click', function(event) {
alert('clicked');
return false;
});

Once you add new A tags to your document, Live Query will bind the click event and there is nothing else that needs to be called or done.

When an element no longer matches a selector the events Live Query bound to it are unbound. The Live Query can be expired which will no longer bind anymore events and unbind all the events it previously bound.

Live Query can even be used with the more powerful jQuery selectors. The following Live Query will match and bind a click event to all A tags that have a rel attribute with the word "friend" in it. If one of the A tags is modified by removing the word "friend" from the rel attribute, the click event will be unbound since it is no longer matched by the Live Query.

$('a[rel*=friend]')
.livequery('click', function(event) {
doSomething();
});

Live Query also has the ability to fire a function (callback) when it matches a new element and another function (callback) for when an element is no longer matched. This provides ultimate flexibility and untold use-cases. For example the following code uses a function based Live Query to implement the jQuery hover helper method and remove it when the element is no longer matched.
Live Query fires a function (callback) when it matches a new element and another function (callback) for when an element is no longer matched. This provides ultimate flexibility and untold use-cases. For example the following code uses a function based Live Query to implement the jQuery hover helper method and remove it when the element is no longer matched.

$('li')
.livequery(function(){
Expand All @@ -43,15 +24,9 @@ Live Query also has the ability to fire a function (callback) when it matches a

### `livequery` Signatures

The `livequery` method has 3 different signatures or ways to call it.
The `livequery` method has 2 different signatures or ways to call it.

The first, and most typical usage, is to pass an event type and an event handler:

// eventType: such as click or submit
// eventHandler: the function to execute when the event happens
$(selector).livequery( eventType, eventHandler );

The second and third signature is to pass one or two functions to `livequery`. Doing this, `livequery` will call the first passed function when an element is newly matched and will call the second passed function when an element is removed or no longer matched. The second function is optional. The `this` or context of the first function will be the newly matched element. For the second function it will be the element that is no longer matched.
Pass one or two functions to `livequery`. Doing this, `livequery` will call the first passed function when an element is newly matched and will call the second passed function when an element is removed or no longer matched. The second function is optional. The `this` or context of the first function will be the newly matched element. For the second function it will be the element that is no longer matched.

// matchedFn: the function to execute when a new element is matched
$(selector).livequery( matchedFn );
Expand All @@ -62,29 +37,18 @@ The second and third signature is to pass one or two functions to `livequery`. D

### `expire` Signatures

The `expire` method has 5 different signatures or ways to call it.
The `expire` method has 3 different signatures or ways to call it.

The first way will stop/expire all live queries associated with the selector.

$(selector).expire();

The second way will stop/expire all live queries associated with the selector and event type.

// eventType: such as click or submit
$(selctor).expire( eventType );

The third way will stop/expire all live queries associated with the selector, event type, and event handler reference.

// eventType: such as click or submit
// eventHandler: the function to execute when the event happens
$(selector).expire( eventType, eventHandler );

The fourth way will stop/expire all live queries associated with the selector and matchedFn.
The second way will stop/expire all live queries associated with the selector and matchedFn.

// matchedFn: the function to execute when a new element is matched
$(selector).expire( matchedFn );

The fifth way will stop/expire all live queries associated with the selector, matchedFn, and unmatchedFn.
The third way will stop/expire all live queries associated with the selector, matchedFn, and unmatchedFn.

// matchedFn: the function to execute when a new element is matched
// unmatchedFn: the function to execute when an element is no longer matched
Expand Down
60 changes: 18 additions & 42 deletions jquery.livequery.js
View file
Expand Up @@ -2,31 +2,27 @@
* Dual licensed under the MIT (MIT_LICENSE.txt)
* and GPL Version 2 (GPL_LICENSE.txt) licenses.
*
* Version: 1.1.1
* Version: 1.2
* Requires jQuery 1.3+
* Docs: http://docs.jquery.com/Plugins/livequery
*/

(function($) {

$.extend($.fn, {
livequery: function(type, fn, fn2) {
livequery: function(fn, fn2) {
var self = this, q;

// Handle different call patterns
if ($.isFunction(type))
fn2 = fn, fn = type, type = undefined;

// See if Live Query already exists
$.each( $.livequery.queries, function(i, query) {
if ( self.selector == query.selector && self.context == query.context &&
type == query.type && (!fn || fn.$lqguid == query.fn.$lqguid) && (!fn2 || fn2.$lqguid == query.fn2.$lqguid) )
(!fn || fn.$lqguid == query.fn.$lqguid) && (!fn2 || fn2.$lqguid == query.fn2.$lqguid) )
// Found the query, exit the each loop
return (q = query) && false;
});

// Create new Live Query if it wasn't found
q = q || new $.livequery(this.selector, this.context, type, fn, fn2);
q = q || new $.livequery(this.selector, this.context, fn, fn2);

// Make sure it is running
q.stopped = false;
Expand All @@ -38,17 +34,13 @@ $.extend($.fn, {
return this;
},

expire: function(type, fn, fn2) {
expire: function(fn, fn2) {
var self = this;

// Handle different call patterns
if ($.isFunction(type))
fn2 = fn, fn = type, type = undefined;

// Find the Live Query based on arguments and stop it
$.each( $.livequery.queries, function(i, query) {
if ( self.selector == query.selector && self.context == query.context &&
(!type || type == query.type) && (!fn || fn.$lqguid == query.fn.$lqguid) && (!fn2 || fn2.$lqguid == query.fn2.$lqguid) && !this.stopped )
(!fn || fn.$lqguid == query.fn.$lqguid) && (!fn2 || fn2.$lqguid == query.fn2.$lqguid) && !this.stopped )
$.livequery.stop(query.id);
});

Expand All @@ -57,10 +49,9 @@ $.extend($.fn, {
}
});

$.livequery = function(selector, context, type, fn, fn2) {
$.livequery = function(selector, context, fn, fn2) {
this.selector = selector;
this.context = context;
this.type = type;
this.fn = fn;
this.fn2 = fn2;
this.elements = [];
Expand All @@ -81,10 +72,7 @@ $.livequery.prototype = {
stop: function() {
var query = this;

if ( this.type )
// Unbind all bound events
this.elements.unbind(this.type, this.fn);
else if (this.fn2)
if (this.fn2)
// Call the second function for all matched elements
this.elements.each(function(i, el) {
query.fn2.apply(el);
Expand All @@ -109,30 +97,18 @@ $.livequery.prototype = {
// Set elements to the latest set of matched elements
this.elements = els;

if (this.type) {
// Bind events to newly matched elements
nEls.bind(this.type, this.fn);

// Call the first function for newly matched elements
nEls.each(function() {
query.fn.apply(this);
});

// Unbind events to elements no longer matched
if (oEls.length > 0)
$.each(oEls, function(i, el) {
if ( $.inArray(el, els) < 0 )
$.event.remove(el, query.type, query.fn);
});
}
else {
// Call the first function for newly matched elements
nEls.each(function() {
query.fn.apply(this);
// Call the second function for elements no longer matched
if ( this.fn2 && oEls.length > 0 )
$.each(oEls, function(i, el) {
if ( $.inArray(el, els) < 0 )
query.fn2.apply(el);
});

// Call the second function for elements no longer matched
if ( this.fn2 && oEls.length > 0 )
$.each(oEls, function(i, el) {
if ( $.inArray(el, els) < 0 )
query.fn2.apply(el);
});
}
}
};

Expand Down
64 changes: 1 addition & 63 deletions test/test.html
View file
Expand Up @@ -9,53 +9,11 @@
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.0/build/base/base-min.css">
<style type="text/css" media="screen">
body { margin: 2em; }
#anim { position: fixed; top: 0; right: 0; width: 100px; height: 100px; background-color: #000; }
* html #anim { position: absolute; }
</style>
<script type="text/javascript" src="jquery.js"></script>
<script src="../jquery.livequery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
var anim = (function() {
var el = $('#anim');
return function() {
el.toggle(1000, anim);
};
})();
anim();

/*** Example 1-1 ***/
var example1_1 = function() {
$(this)
.text('Clicked')
.blur();
return false;
};
$('input[name=example1-1-add]')
.bind('click', function() {
$('ul#example1-1')
.append('<li><a href="#listitem">List Item</a></li>');
this.blur();
});
$('input[name=example1-1-expire]')
.bind('click', function() {
$('body #example1-1 a')
.expire('click');
this.blur();
this.disabled = true;
$('input[name=example1-1-restart]').attr('disabled', false);
});
$('input[name=example1-1-restart]')
.bind('click', function() {
$('body #example1-1 a')
.livequery('click', example1_1);
$('input[name=example1-1-expire]')[0].disabled = false;
$('input[name=example1-1-restart]').attr('disabled', true).blur();
});
$('#example1-1', 'body')
.find('a')
.livequery('click', example1_1);

/*** Example 1-2 ***/
var matched = function() {
$(this)
Expand Down Expand Up @@ -93,28 +51,8 @@
</script>
</head>
<body>
<div id="anim"></div>
<h1>Live Query: Unordered List Examples (Using Function References)</h1>
<p>A common use-case is when a new list item is added to an unordered list and an event should be bound to it or a script notified of the change.</p>

<h2>Binding an event to each list item</h2>
<p>The list below uses a live query to bind a click event to each list item that changes the text to read 'Clicked'. Expiring the Live Query unbinds the events.</p>
<pre><code>$('#example1-1', 'body')
.find('a')
.livequery('click', function() {
$(this)
.text('Clicked')
.blur();
return false;
});
</code></pre>
<p><input type="button" name="example1-1-add" value="Add New Item"> <input type="button" name="example1-1-expire" value="Expire Live Query"> <input type="button" name="example1-1-restart" disabled="disabled" value="Restart Live Query"><p>
<ul id="example1-1">
<li><a href="#listitem">List Item</a></li>
<li><a href="#listitem">List Item</a></li>
<li><a href="#listitem">List Item</a></li>
<li><a href="#listitem">List Item</a></li>
</ul>
<p>A common use-case is when a new list item is added to an unordered list and a script notified of the change.</p>

<h2>Get notified when a list item is added</h2>
<p>The list below uses a Live Query to call a function when a new list item is added. This function adds the following text to each list item: '(Updated)' and removes it when the Live Query is expired.</p>
Expand Down
75 changes: 2 additions & 73 deletions test/test2.html
View file
Expand Up @@ -9,63 +9,11 @@
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.0/build/base/base-min.css">
<style type="text/css" media="screen">
body { margin: 2em; }
#anim { position: fixed; top: 0; right: 0; width: 100px; height: 100px; background-color: #000; }
* html #anim { position: absolute; }
</style>
<script type="text/javascript" src="jquery.js"></script>
<script src="../jquery.livequery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
var anim = (function() {
var el = $('#anim');
return function() {
el.toggle(1000, anim);
};
})();
anim();

/*** Example 1-1 ***/
var example1_1 = function() {
$(this)
.text('Clicked')
.blur();
return false;
};
$('input[name=example1-1-add]')
.bind('click', function() {
$('ul#example1-1')
.append('<li><a href="#listitem">List Item</a></li>');
this.blur();
});
$('input[name=example1-1-expire]')
.bind('click', function() {
$('body #example1-1 a')
.expire('click');
this.blur();
this.disabled = true;
$('input[name=example1-1-restart]').attr('disabled', false);
});
$('input[name=example1-1-restart]')
.bind('click', function() {
$('body #example1-1 a')
.livequery('click', function() {
$(this)
.text('Clicked')
.blur();
return false;
});
$('input[name=example1-1-expire]')[0].disabled = false;
$('input[name=example1-1-restart]').attr('disabled', true).blur();
});
$('#example1-1', 'body')
.find('a')
.livequery('click', function() {
$(this)
.text('Clicked')
.blur();
return false;
});

/*** Example 1-2 ***/
var matched = function() {
$(this)
Expand Down Expand Up @@ -117,27 +65,8 @@
<body>
<div id="anim"></div>
<h1>Live Query: Unordered List Examples (Using Anonymous Functions)</h1>
<p>A common use-case is when a new list item is added to an unordered list and an event should be bound to it or a script notified of the change.</p>

<h2>Binding an event to each list item</h2>
<p>The list below uses a live query to bind a click event to each list item that changes the text to read 'Clicked'. Expiring the Live Query unbinds the events.</p>
<pre><code>$('ul#example1-1', 'body')
.find('a')
.livequery('click', function() {
$(this)
.text('Clicked')
.blur();
return false;
});
</code></pre>
<p><input type="button" name="example1-1-add" value="Add New Item"> <input type="button" name="example1-1-expire" value="Expire Live Query"> <input type="button" name="example1-1-restart" disabled="disabled" value="Restart Live Query"><p>
<ul id="example1-1">
<li><a href="#listitem">List Item</a></li>
<li><a href="#listitem">List Item</a></li>
<li><a href="#listitem">List Item</a></li>
<li><a href="#listitem">List Item</a></li>
</ul>

<p>A common use-case is when a new list item is added to an unordered list and a script notified of the change.</p>

<h2>Get notified when a list item is added</h2>
<p>The list below uses a Live Query to call a function when a new list item is added. This function adds the following text to each list item: '(Updated)' and removes it when the Live Query is expired.</p>
<pre><code>var matched = function() {
Expand Down

0 comments on commit 20efab2

Please sign in to comment.