Develop Reference

jQuery append string to url after ajax load

I am adding query string to urls using this jQuery
$( 'a' ).attr( 'href', function(index, value) {
return value + '?appp=3';
});
This works fine, but after the ajax load, the new href's created are not recognized by the above jQuery. Is there a way to reload the code so to affect the new posts URL's which are loaded via ajax. Super thanks.

Perfect, thanks #developer, that worked nicely. Here how I did it as you mentioned:
function apendquery(){
$( 'a' ).attr( 'href', function(index, value) {
return value + '?appp=3';
});
};
$(document).ready(function(){
apendquery();
});
$(document).ajaxComplete(function () {
apendquery();
});

Of course it wont work on new elements. You can create function which you shuold call each time when new 'a' elements appears in DOM. Also you will need to create some kind of flag which helps you identify and update the href only for the new elements.
var updateHref = function(){
$( 'a[data-updated!=1]' ).attr( 'data-updated',1).attr( 'href',
function(index, value) {
return value + '?appp=3';
});
};
...
$.ajax(...)
.done(function() {
...
// add new 'a' tags
....
// then call our function to update href
updateHref();
});

Actually here is my final code which is better version in case the URL already appended a query should anyone might find useful:
function apendquery() {
$('a').attr('href', function(index, value) {
return value + (value.indexOf('?') !== -1 ? "&" : "?") + 'appp=3';
});
};
$(document).ajaxComplete(function() {
apendquery();
});

Effect on div doesn't occur when the content is loaded from JSON file using Ajax.

I have created an unordered list just like in this example - DirectionAwareHoverEffect .
Because I may have a lot of content, I decided to automate the markup. I included the content in a JSON file. The file is loaded using the following code.
$.ajax({
//cache: false,
url: "../content/"+"benefits.json",
dataType: "json",
success: function(data) {
var rows = data.rows;
var item = '<ul id="da-thumbs" class="da-thumbs">';
$.each(rows, function(idx, obj) {
item += '<li><a class="hvr-float"><img src="' + obj.image + '" /><div><span>' + obj.title + '</span></div></a></li>';
});
item += '</ul>';
$("#benefits-container").html(item);
}
});
However after having done so, the JS effect no longer works and I don't see any errors when I use the debugging tool.
The JS effect for the DirectionAwareHoverEffect (according to the tutorial) is done using this code
$('#da-thumbs > li ').each( function() {
$(this).hoverdir({
hoverDelay : 0
});
} );
Of course, this code calls its own library given in the source code.
I included the content loading function in the $(window).load() function and the JS effect in the $(document).ready() function. But I do not get any effect.
Any help will be much appreciated.

You either need to use delegation like on() or you need to call the plugin after the ajax call and the appending of the elements.
So, either, after this line
$("#benefits-container").html(item);
do
$('#da-thumbs > li ').each( function() {
$(this).hoverdir({
hoverDelay : 0
});
} );
or try and see if you can delegate like
$(document).on('hoverdir', '#da-thumbs > li', function(){
return {hoverDelay : 0}
}));
$('#da-thumbs > li ').each( function() {
} );
Note, above delegate suggestion may not be %100 correct as I am not sure how to bind to custom events(and can't look it up right now, sorry :) ).

Elements created by getJSON don't react to the rest of the javascript loaded on the page

I am using getJSON to access Vimeo's Simple API, and any objects created on the page by the call, do not react to the rest of the javascript that is on the page. It is probably something simple that I am missing. Here is my getJSON code:
$.getJSON("http://vimeo.com/api/v2/album/1822727/videos.json", function(data){
$.each(data, function (index, value) {
var videoID = value.id;
var videoThm = value.thumbnail_large;
$('#galThms').prepend('<li id="thm' + videoID + '" style="background-image:url(' + videoThm + ');"></li>');
console.log(videoThm);
});
});

Here you go: http://jsfiddle.net/8t3Xq/1/
This demonstrates loading your <li> thumbs just as your question does, then I show how to easily change one of them. How to "change" them is endless, this is just a simple example of changing the content and background. So you must not have your selectors right.
This is just a snippet, see fiddle for everything...
$.getJSON("http://vimeo.com/api/v2/album/1822727/videos.json", function(data){
$.each(data, function (index, value) {
var videoID = value.id;
var videoThm = value.thumbnail_large;
$('#galThms').prepend('<li id="thm' + videoID + '" style="background-image:url(' + videoThm + ');"></li>');
console.log(videoThm);
});
});
window.changeIt=function()
{
$('li').first().html("I'm changed!");
$('li').first().css("background-image","");
}
Just make sure the <li>s are present first before your code that changes them is present. Would need to see more of you code to understand when/how that happens.

$.getJSON("http://vimeo.com/api/v2/album/1822727/videos.json", function(data){
$.each(data, function (index, value) {
var videoID = value.id;
var videoThm = value.thumbnail_large;
$('#galThms').append('<li id="thm' + videoID + '" style="background-image:url(' + videoThm + ');"></li>');
console.log(videoThm);
$( "#galThms li" ).click(function() {
$(this).hide();
});
});
});
try this

there is no way that my answer is so far removed from the problem statement. my guess is that either I somehow errantly posted this answer or the problem was edited. apologies
you could also use:
$(document).on('click','li .playVideo',function(){
//do something
});
i would probably change your #playVideo to a class, if you will have multiple li's

Issue with binding event handler to dynamically generated divs

I have a problem with displaying the id of the clicked div on the screen in an alert window. I am pretty confident this is because of the order of the controls and event handlers being added to the page, however after trying different ways I am unable to get this to work. Unfortunately I can't post reproducible code due to the div's being created from an ajax get request.
$(document).ready(function () {
$.getJSON('ClientPortal/GetSkills', function (data) {
var test = 'poo';
$.each(data, function (data) {
$('#flipContainer').append("<div class=flip id='" + this.Value + "' value='" + this.Value + "'>" + this.Text + "<//div>");
})
})
})
$(document).ready(function () {
$(".flip").on('click', function () {
alert($(this).attr("id"));
})
})

Try this :
$(document).ready(function () {
$("#flipContainer").on("click", ".flip", function () {
alert($(this).attr("id"));
})
})
You effectively have to base you click-binding on an element existing when the DOM ready event fires... But with this syntax, you delegate the binding on an existing element but it applies to another element contain in the first one...
See the jQuery documentation for on (for line "selector") : http://api.jquery.com/on/#on-events-selector-data-handlereventObject .

Need function like jquery empty() that removes elements added by jquery

I have a blank div called "content". Links are later added to "content" using jquery append. Using empty() does not work; I am guessing empty() wont clear the links added by jquery because the links are not added to the DOM?
function should clear, then display new links, but its not clearing the links, just appending to whatever was present.
function getSubRedditLinks(url)
{
$("#content").empty(); //doesnt work
$.getJSON(
url + suffix,
function foo(data)
{
$("#content").empty(); //doesnt work
$.each(
data.data.children,
function (i, post)
{
$("#content").append( '<section>' +
'' + post.data.title + '' +
'</section>' );
}
);
}
);
$("#content").empty(); //doesnt work
}
Function is called like this:
<li><a class="link" href="#" onclick=getLinks("localhost")>Blogroll</a></li>
Apparently, empty() should work. I simplified my code above, put its not working in the 3 places I put them. It just keeps adding links to the #content

Try this out:
function getLinks(url)
{
$.getJSON(
url + suffix,
function(data)
{
var items = [];
$.each(
data.data.children,
function (i, post)
{
var section = $('<section></section>').append('<a></a>');
section.find('a').attr('href', '#post=post-' + i).text(post.data.title);
items.push(section[0].outerHTML);
}
);
$('#content').empty().append(items.join(''));
});
}

Use $(...).remove() instead... Or $("#content").html("")

Works for me, check this out
http://jsfiddle.net/gzNFK/2/
note: remove the comment to use it