Folks,
This is originall a question to Erik Beeson (so I hope he is lurking
around) from a previous thread on "Creating DOM Elements on the fly" ,
but I chose to post it as new topic since it lead to and also touches
on some fews issues regarding the theory of jQuery.
First, Erik provided a neat plugin to clone a node - an .appendTo
overload function.
> (function($) {
> var _appendTo = $.fn.appendTo;
> $.fn.appendTo = function(parent, n) {
> if(n) {
> var id = this.attr('id');
> for(var i = 1; i < n; i++) {
>
> _appendTo.apply(this.clone(true).attr("id",id+i).attr("name",id+i),
> [parent]);
> }
> return
> _appendTo.apply(this.attr("id",id+n).attr("name",id+n), [parent]);
> } else {
> return _appendTo.apply(this, arguments);
> }
> };
>
> })(jQuery);
>
Example usage:
// create 10 checkboxes with id="cb1" to id="cb10"
$("<input type='checkbox' id='cb'/>").appendTo("#myFormId",10);
The question originally intended to Erik, but of course, anyone is
welcome to jump in, is how to
add a click handler here. I tried the following and it didn't take:
$('<input type="checkbox" id="cb"/>')
.click(function() {
// do something
})
.appendTo('#myFormId', 10);
It didn't seem logical, but I also tried reversing .click and .append.
as well:
$('<input type="checkbox" id="cb"/>')
.appendTo('#myFormId', 10)
.click(function() {
// do something
});
So I am not sure if this a jQuery ".clone()" issue or adjustment is
required with the plug-in, or maybe I need to separate the single line
idiom to add the click handle after it is clone. Maybe a jQuery
expert will chime in explain why this cloning didn't apply here. I
also dug into jQuery to study the code, but at this point, I wasn't
quite following its design.
But the solution here is not as important as an overall issue I have
that I hope can be improve so that I can run on my own here and be
productive with jQuery.
Which leads me to the main topic - To obstruse or not obstruse.
I have raw DOM code that does what I want. The creation of DOM
elements and applying a single onClick="xxx" handler is long been
implemented in our web system. The JS is resusable single source code
applied in various common multi-checkbox needs. Th key here is that
I understand it. I wrote the DOM/JS logic.
Of course, this is an open ended rhetorical question with no end in
sight, so I will focus on a fundamental idea that most programmers, if
not all, deal with most of the time.
That idea is "mixing" levels of logic - using raw DOM and jQuery
together.
This is especially true with application developers who use higher
level tools, libraries, APIs, SDKs, "helpers" etc, such as jQuery.
Of course, the less you know the tool (jQuery in this case), the
tendency would be to mix code. As you learn jQuery and see how it can
reduce raw code, typically you use it if it provides the same
functionality. But quite often it may not so you may compromise,
change/add jQuery logic, create a plugin or not use it where it may
not do exactly what you want.. You get the idea. We all have
confront in programming.
So to get the point, what I would to see, if its not already done,
jQuery documentation or reference to resources, covering ideas such
as:
- A list of limitations or areas where jQuery may not apply or well
enough that it obstruct with the efficient of the client.
- A list of common raw DOM methods or techniques that jQuery is
designed to reduce with a focus that it doesn't remove or obstruct the
original DOM techniques and functionality. If it does obstruct with
the intended functionality, this elements should be highlighted.
One may call this list "jQuery Plug and Play Designs"
I think the consolidated list of jQuery Plugins already published and
documented at the jQuery web site does cover a good bit of the "jQuery
Plug and Play Design" list. In fact, it was a search on "Balloon
tips" that lead to the discovery of jQuery via the jTip and ClueTip
plugins.
However, in my view, this list should reference the jQuery Plugin
list, but it should be more DOM/HTML elemental in description.
The overall goal here with this suggestion is to help in reducing
programming "obstrusive" code and to help programmers see how jQuery
applies and may not apply.
As an added suggestion, I see that Rey and others often post messages
with links to jQuery write ups. If this isn't already done, this list
of articles should be added and updated to the jQuery web site.
Thanks for your time
--
HLS
