Develop Reference

Dynamic field generation with CSS Togglebuttons and .on() binders

Question:
I am trying to build a dynamic form using jQuery. There are a few standard html form inputs in a row in addition to a CSS stylized "hidden checkbox" toggle button. (Example)
The first row is statically coded, and there is a button to add more rows to the form for batch submissions. JQuery applied to the .on(click) event works perfectly with the static content, but newly appended form rows ignore the binding. Even jsfiddle's dynamic display doesn't appear to function, though it is possible my fiddle example has a bug that my working copy doesn't have. (Fiddle)
/* activeToggle is the selector for the container and descendants,
// .toggleHappy is the hidden input element within activeToggle */
$(activeToggle).on("click", ".toggleHappy", function(e) {
e.preventDefault();
$(this).val(($(this).val() == 0) ? 1 : 0);
console.log($(this).val());
});
I have researched and found the common mistake of using .click() instead of delegating using .on(click, selector, fn()) and am thus using the latter now.
What is frustrating is I have another .on(click) that IS working with the dynamic content. (the remove function) So, I was hoping another pair of eyes might help me find out what my mistake is. I know this is very similar to other questions on the basic subject, but I have read quite a number of those discussions first, and have applied many of them to get where I currently am.
Updates:
I tried what Madhavan suggested and it does in fact work, but as expected, only for the first-child. So dynamically added rows are not pointed to. Thanks for the fast look. I feel like it might be a selector/scope issue, but whats weird is that once the page is loaded, I can type this directly into console and it works?
//this works run from console, but doesn't fire from a real click?
$(".theContainer .data .switch .toggleHappy").first().click();
ANSWER I have been working on another project in the interim and it is starting to look like .on(event, selector, fn) is not working at all for dynamically added items. But, I had a breakthrough! The other project was slightly simplified, and I found the following:
//.theContainer is static
//.data .switch .toggleHappy is the dynamic chain created
//does not delegate and bind dynamically
$(".theContainer").on("click", ".data .switch .toggleHappy", function() {});
//DOES work!
$(".theContainer").on("click", ".toggleHappy", function() {});
It would appear that a selector like .path .to .element only works well on existing static content, while .element allows .on() to be bound and delegated properly for dynamically generated nodes. See the updated fiddle.
The part that confused me was that hopping into the console and referencing dynamic elements with the full selector DID work on dynamic elements, but the events weren't delegated to them. Thanks again for the eyes that looked over this question, hope it helps someone else, because I still haven't found this on the web yet.

It appears that delegating jQuery events with .on() will only work on static content when the selector used within .on() is a list of consecutive elements. In my code, I had a single container which was static, I delegated an event to it referencing multiple elements between the container and the destination elements. It would work locally for any number of statically identified elements, but any dynamically added ones would ignore the bindings. It also would throw no errors, and it WOULD respond to lines of script executed within the console directly, using the same selector chaining as the function. I found the following:
//.theContainer is static
//.data .switch .toggleHappy is the dynamic chain created
//does not delegate and bind dynamically
$(".theContainer").on("click", ".data .switch .toggleHappy", function() {});
//DOES work!
$(".theContainer").on("click", ".toggleHappy", function() {});
It would appear that a selector like ".path .to .element" only works well on existing static content, while ".element" allows .on() to be bound and delegated properly for dynamically generated nodes. See the updated fiddle.
The part that confused me was that hopping into the console and referencing dynamic elements with the full selector DID work on dynamic elements, but the events weren't delegated to them. Thanks again for the eyes that looked over this question, hope it helps someone else, because I still haven't found this on the web yet.

$(activeToggle).on("click", function(e) {
e.preventDefault();
$(":first-child",this).val(($(":first-child",this).val() == 0) ? 1 : 0);
console.log($(":first-child",this).val());
});
I made a change like this and works fine. But I'm not sure why it is not triggering for '.toggleHappy' instead.

jquery issue with new version

I'm using this sample but I wish to use the latest version of Jquery.
I noticed when using Jquery-ui 1.9.0 or above, the dialog does not show up anymore. It works fine with the original version (1.0.8) available in the demo.
Same thing if I use Jquery 2.2.1 (Jquery not Jquery -ui) instead of 1.4.2
The only change I have tried was replacing $('a.delete').live('click',function(){ by $('delete').on('click', 'a', function(){ in order to remedy to the deprecated .live
I can't figure out what else needs to be changed, even after looking at the Jquery and Jquery change logs. The Jquery-migrate tool doesn't give anything wrong.
The goal of the script is to remove a line when clicking on the icon. A dialog should be displayed to invite the user to confirm/cancel.

$('delete').on('click', 'a', function(){})
is not equivalent to
$('a.delete').live('click',function(){})`
These do two different things.
Your .live() one is actually attaching an event to document and then checking to see if the element actually clicked was a child <a class="delete"> tag.
In your .on() example, you are trying to bind an event to a <delete> element, and check to see if the actual element triggered was a child <a>. This is obviously not what you want.
If your elements are being added to the page dynamically, then you can try:
$(document).on('click', 'a.delete', function(){});
This will be the same as your .live().

Why are you changing the selector?
$('a.delete').live('click',function(){})
should be changed to:
$('a.delete').on('click',function(){})
or
$('a.delete').click(function(){})

Jquery Toggle on click of image

I am trying to understand how the jquery toggle works. I want to toggle to next anchor with class plr-anchor on click of image with class go_down. The data is populated using maps.
Jquery code:
$('.go_down').on('click',function(e){
#('.plr-anchor').next('.plr-anchor').toggle()});
}
Code snippet:
{data.map(function(categ) {
return <div>
<a className="plr-anchor" id={categ.short_name}></a>
<img src="/static/img/icon_up.png" className="go_down"/>
</div>}.bind(this)}
There seems to be a problem with the syntax on the Jquery call function. I am newbie with Jquery, any help will be great. Thanks in advance.

You have used # instead of $ inside click handler. Also you need to find exact plr-anchor which is before the clicked image. Right now you are toggling all plr-anchor.
For dynamic elements, use $(document).on(event, selector, function(){}); for binding click handlers. See below code
$(function(){
$(document).on('click','.go_down',function(e){
$(this).prev('.plr-anchor').toggle();
});
});

Your jQuery code has a "#" instead of a "$". By the way, React and jQuery don't always go together. The whole purpose of React is to use virtual dom and let React take care of dom updates. While jQuery is mostly about direct dom manipulation. What you are trying here will interfere with React because it won't expect the dom to change without the v-dom changing.
Ideally, you should be using event handlers and state in your component to toggle visibility.

jQuery, <div> loading itself using generated links that are clickable more than once

I got following problem: I generate a div with "jQuery-Load" links. Theese links inside the div should reload the same div with different parameters. I found a working solution, which generates theese links, which are clickable and... ...trigger the chosen event once. So clicking the same link inside the generated div, after it has been regenerated, doesnt work anymore. Tried a lot of things...
It looks like that now:
click
<div id="aaa0"> I'm the div - level1! </div>
div gets filled - beautyful.
It now contains this: (actually its generated what is why wrote [time] wich is time(); generated in php. as a changing parameter
[...] Link inside Updated Div [...]
when i click the link inside the div it works. when i click it again, it wont...
I want to generate a nice 'click deeper inside the data'-thing, which would be amazing getting this thing work and is the reason why everything must be as best as possible inside the "onclick" event :|
Sorry btw. for the a bit confusing post-style, its a confusing topic, and im not native speaking :)
Thanks for any help or hint in advance,
Harry

Maybe you're missing the concepts between bind and live. In bind, jQuery scans the document and attach a function direct to the element. In live, jQuery attach the function to the document, along with the event and the element as parameters. Once a event bubbles, jQuery check the event and the element, and if it match, then a function executes.
After the first run, the dom has changed, and its gonna work using live.

something like that should work:
click
<div id="aaa0"> I'm the div - level1! </div>
<script>
$('a').live('click', function (e) {
e.preventDefault();
var id = this.id;
$(this).next('div').load('getdetails.php?fNumber=36&env=fun&id=' + id);
});
</script>
basically, what is done is a generic rule, which gives all tags the same behavior. (load next div content). ".live()" is used so that loaded tags work (check the jquery documentation for .live(), or event delegation in general).
I'm not certain about the preventDefault stuff. You might want to use somehting else than tag for the link.

click
made the day :) I don't know exactly why, but maybe its possible preventDefault made the bind and live thing for me. Its working fine, so ...
thanks for the hints! :D

qTip (jQuery plug-in) how can I remove all qtips in my page?

I'm using the jquery-plugin qTip. What's the command to destroy all tooltips in my page ?
I tried:
$('.option img[title], span.taxonomy-image-link-alter img[title]').qtip("destroy");
But it didn't work...
Thanks

I've solved with $(".qtip").remove();

qTip2 is newer version of this script, but I would just like to point out 1 thing.
$(".qtip").remove();
This piece of code didn't destroy all the tooltips - it simply removed their containers. All the handlers and events attached to objects which invoked the tooltips are still avaiable in browser's memory.
In qTip to delete the tooltip and it's handler scompletely you would have to use:
$(mytooltip).qtip("destroy");
or
$(mytooltip).qtip('api').destroy();
In qTip2 however using this:
$(mytooltip).remove();
Would automaticaly call out the api and destroy tooltip and it's handlers completely.

$('.qtip').each(function(){
$(this).data('qtip').destroy();
})

qtip("destroy") is buggy (version 2.1.1) and doesn't clear everything.
I found this as a proper workaround:
// don't call destroy if not needed
if (element.data("qtip")) {
// the 'true' makes the difference
element.qtip("destroy",true);
// extra cleanup
element.removeData("hasqtip");
element.removeAttr("data-hasqtip");
}

Looks buggy. I've had some luck with this, but it does not restore the original titles. I suspect destroy doesn't do that either...
$('span.taxonomy-image-link-alter img')
.filter(function(){return $(this).data('qtip');})
.qtip('destroy');
It seems you cannot call destroy on elements without qTip - it doesn't fail silently, but throws an exception and stops the loop.

I experienced that the api-call
$(selector).qtip('destroy')
doesn't remove all qtip-data dependably, especially when using several qtips simultaneously.
In my case I had to remove a visible qtip and successfully used this workaround:
$(selector).removeData('qtip');
$('.qtip :visible').remove();

What about:
$('[data-hasqtip]').qtip('destroy', true);
Seems to be working with qTip2 version 3.0.2.

if ( jQuery( '.qtip' ).length > 0 )
{
jQuery( "#IdElement").qtip("destroy");
}

None of these answers helped me.
In my case, I had a qtip on an element with a close button. The close button removed the element, so there was no reference point to remove the qtip after the element was removed.
I thought $('.qtip:visible').remove() would work, but it somehow removed all of the qtips on the page, and not the single one that I wanted removed.
I noticed that the visible qtip is given a class qtip-active, so what worked for me was:
$('.qtip-active').remove();

It may be a little late, but I had issues with memory and page load when an ajax call replace the content in the page, deleting the target qtip2 objects before destroy them, so some elements remains even if the target had gone.
Based on the fact that sometimes you want to clean all qtips2 elements and data, no matter if the original object exist or not, some tooltip elements remains on the body, so when the original target has gone there is no easy way to call the destroy() method.
Unless you do it searching for the created objects instead of the targets.
jQuery('div[id^="qtip-"]').each(function(){ //search for remaining objects
_qtip2 = jQuery(this).data("qtip"); //access the data where destroy() exist.
//if it's a proper qtip2 object then call the destroy method.
if(_qtip2 != undefined){
// the "true" is for immediate destroy
_qtip2.destroy(true);
}
//if everything went right the data and the remaining objects in the body must be gone.
});
I used JQuery for a no conflict issue, but you can use "$" (symbol) instead of JQuery