Develop Reference

Dynamically add a function to for a class

I use an inline editor for bootstrap that needs to be initiate in the javascript.
I want to use a general class "editable" for elements but there is a problem when i use jQuery.load.
If i declare $('.editable').editable(); it works but when i load some content from external file with jQuery.load it doesn't work for elements inside loaded div.
I need to run $('.editable').editable(); again to make it works.
How can i assign the function to the class and work dynamically?
Thanks

You can run a function when AJAX events complete:
http://api.jquery.com/ajaxComplete/
If you run $('.editable').editable(); in that callback, should work.
For example:
$( document ).ajaxComplete(function() {
$('.editable').editable();
});

Ok. I found a way, not a clean one!
The Editable plugin adds a class "editable-click".
I made a listener on hover and if doesn't have that class to run the function on the element.
The final code:
$('body').on('mouseover', '.editable', function(event) {
if( !$(this).hasClass('editable-click') )
$(this).editable();
});

jQuery - one of the two divs open onLoad

My jquery should open only the first of two divs on page load, but now it opens both.
Also, I've added .active class to my CSS to color the active divs link, but it won't work.
Jquery
$(document).ready(function () {
$(this).find('.infoexpanderContent').slideDown();
});
$('.infoexpanderHead').click(function () {
$(this).siblings().find('.infoexpanderContent').slideUp();
$(this).find('#infoactive').addClass("active");
$(this).find('.infoexpanderContent').slideDown();
$(this).siblings().find('#infoactive').removeClass("active");
});
CSS
.active {
color: green;
}
Really new to JS and Jquery so be simple please :)

Try specifying the :first selector:
$('.infoexpanderContent:first').slideDown();
By the way, there's no need for the $(this).find() method, since in the DOM wrapper, $(this) refers to the document, which is always assumed in jQuery.

Inside the dom ready handler this refers to the document object so your selector $(this).find('.infoexpanderContent') returns all infoexpanderContent elements in the page and slides them down
Fire the click event on the first element after the click handler is added
$('.infoexpanderHead').click(function () {
$(this).siblings().find('.infoexpanderContent').slideUp();
$(this).find('#infoactive').addClass("active");
$(this).find('.infoexpanderContent').slideDown();
$(this).siblings().find('#infoactive').removeClass("active");
}).first().click();
It is better to use a manual click trigger since you also will have to add the active class to the first infoactive element

Hover only works when user clicks on the element

Following is the link to my js fiddle in which i am trying to show a popover on hover property of the element hover for popover with id a1 . The problem i am facing is that when the page loads for the first time and on hover on that element the popover doesnot display. But when user clicks on hover for popover and then do the hover, then hover property works perfectly fine kindly let me know why isn't it happening on the page load event and how can i fix it so user doesnot have to click on the button and it display whatever in it.
Note: It can be easily done by following but the problem is ids for the elements are being dynamically generated so i cannot use the following method for specifically one id.
$(function ()
{ $("#example").popover();
});
JSFIDDLE:
http://jsfiddle.net/weuWk/323/

First, add a class to all of your hover elements:
<span id="a1" class="btn large primary hoverable">Popover</span>
Then, add the popover to each item:
$(document).ready(function(){
$('.hoverable').popover({title: "Hello"});
});
Edit: To reference the id (or any other attribute), you can use .attr() as follows:
$(document).ready(function(){
$('.hoverable').each(function(){
$(this).popover({title: $(this).attr('id')});
});
});

I think the problem comes from the fact you are calling the popover() function before your document is properly loaded and then before $('#a1') in your example can match anything.
Check your updated jsfiddle here : http://jsfiddle.net/weuWk/325/
You need to call popover only when your document is ready like this :
$(document).ready(function() {
$('#a1').popover({title: "Hello"});
});

fixed http://jsfiddle.net/pieterwillaert/weuWk/327/
what you do is the following:
when the document is loaded you iterate through all your buttons (I did it by using 'span' you could easely change that too '.button')
you give each button a popover
$(document).ready(function() {
$('span').each(function(index) {
$(this).popover({title: "Hello"});
});
});​

using preventDefault() with on() in jQuery AJAX tabs

I have a set of jQuery UI AJAX tabs that load individual .php pages when they are clicked. All of my styling, etc. conveys, because the pages that hold the tabs widget provide the already linked CSS, and scripts. When it comes to the actual pages that load when clicking on the tabs however, I can't seen to get preventDefault() to work with .on() on these newly created DOM elements.
I'm using jQuery BBQ with my tabs so I can't have "#"s being appended to the URL. This is caused when links within the tab panels are clicked.
I've been able to successfully use preventDefault() on DOM elements that are initially loaded, but not ones that are being fetched into the tabs widget via AJAX.
My function for a content toggler is...
$(function(){
$(".showMoreOrLess").on('click', (function() {
if (this.className.indexOf('clicked') != -1 ) {
$(this).removeClass('clicked');
$(this).prev().slideUp(500);
$(this).html("Read More" + "<span class='moreUiIcon'></span>");
}
else {
$(this).addClass('clicked');
$(this).prev().slideDown(500);
$(this).html("See Less" + "<span class='lessUiIcon'></span>");
}
}));
});
I'd like to combine the preventDefault() from this function into it.
// prevents default link behavior on BBQ history stated tab panels with "showMoreOrLess" links
$(".showMoreOrLess").click(function (event)
{
event.preventDefault();
//here you can also do all sort of things
});
// /prevents default behavior on "showMoreOrLess" links
I've tried several ways using .on("click", function(work)), etc. I've used .on() in a separate function and also tried to combine it in the first function above. Does anyone know what I'm doing wrong? The code works on tab content that is static, just not content loaded via AJAX. Any help would be greatly appreciated. Can't seem to figure this out. Thanks in advance.

the part $(".showMoreOrLess").click just applies to already accessable links on your page
try to use event delegation (here the clicks are captured on an every time existing element and you just pass the selector it is watching for... as a nice side effect you save listeners
$(document).on("click", ".showMoreOrLess", function(event) {
event.preventDefault();
//here you can also do all sort of things
});
rather than document use a certain id from your page $("#myContainerId") (EDIT: of course the elements you are clicking on need to be inside of the element with the id)

$("body").on('click', ".showMoreOrLess", function(event) {
event.preventDefault();
var self = $(this);
if (self.hasClass('clicked')) {
self.html("Read More" + "<span class='moreUiIcon'></span>").removeClass('clicked').prev().slideUp(500);
}else {
self.html("See Less" + "<span class='lessUiIcon'></span>").addClass('clicked').prev().slideDown(500);
}
});

How can I call a Jquery method on DOM elements that don't exist yet?

I'd like to use this lightbox plugin for some autocomplete links, that don't yet exist on my page.
You normally activate it using:
$(document).ready(function($) {
$('a[rel*=facebox]').facebox()
})
Since the a links aren't all on the page upon page load, I would normally look to the .live or .delegate methods to bind to an event, but in this case, what 'event' would I bind to to say "once this element is on the page, then call this method on it".
Or am I going about this totally the wrong way?

There is no such event.
You need to invoke the plugin when you add the elements to the page.
// create a new <a>, append it, and call the plugin against it.
$('<a>',{rel:"facebox"}).appendTo('body').facebox();
This example creates a new <a> element. If you're getting some elements from an AJAX response, call it against those:
var elems = $( response );
elems.filter( 'a[rel="facebox"]' ).facebox(); // if the <a> is at the top level
elems.find( 'a[rel="facebox"]' ).facebox(); // if the <a> is nested
elems.appendTo('body');

Not yet tested :
$(document).ready(function($) {
$(document).bind('change', docChanged) ;
})
function docChanged()
{
if ($('a[rel*=facebox][class!="faceboxed"]').length > 0)
{
$('a[rel*=facebox][class!="faceboxed"]').addClass("faceboxed").facebox();
}
}

This is entirely possible using the .live function. You just need to use the DOMNodeInserted event.
$(document).ready(function() {
$("a[rel*=facebox]").live("DOMNodeInserted", function() {
$(this).facebox();
});
});

You'll need to just add this call to the ajax that loads in the links.