jQuery Plugin
.unlink()
.unlink( target ) Returns: jQuery
Description: Remove a previously created link.
-
version added: 1.4.3.unlink( target )
targetAn object to unlink.
This documentation topic concerns the jQuery Datalink plugin (jquery-datalink), which can be downloaded from: http://github.com/jquery/jquery-datalink.
Links created with .link() can be removed with .unlink().
var person = {};
$("form").link(person);
$("[name=firstName]").val("aValue");
person.firstName; // aValue
$("form").unlink(person);
$("[name=firstName]").val("aNewValue");
person.firstName; // still "aValue"
If the original link matched multiple elements, .unlink() may also be used to remove the link on a subset of the elements. The following example shows how to link all input elements to an object, and then how to unlink input elements that have a specified CSS class:
var person = {};
$("input").link(person);
$(".nolink").unlink(person);
.unlink() can unlink elements that were part of the original link, but note that .link() also responds to bubbled-up change events from the selected elements' descendants. .unlink() will only unlink elements that were explicitly matched by the original link, not descendants of those elements.
Example:
Link all input elements of a form to an object, then remove the link.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://github.com/jquery/jquery-datalink/raw/master/jquery.datalink.js"></script>
</head>
<body>
<form>
<div>
First Name:
<input type="text" name="firstName" />
</div>
<div>
Last Name:
<input type="text" name="lastName" />
</div>
<div>
<input id="unlink" type="button" value="unlink" />
</div>
</form>
Object.firstName: <span id="objFirst"></span><br/>
Object.lastName <span id="objLast"></span>
<script>
var person = { };
$("form").link(person);
// Chain link the person object to these elements to show the results
$("#objFirst").link(person, {
firstName: {
name: "objFirst",
convertBack: function(value, source, target) {
$(target).text(value);
}
}
});
$("#objLast").link(person, {
lastName: {
name: "objLast",
convertBack: function(value, source, target) {
$(target).text(value);
}
}
});
// remove link
$("#unlink").click(function() {
$("form").unlink(person);
});
</script>
</body>
</html>