We Keep Coding

use delegate to change source of img when clicked

I created a button that will take in a website url and then display stars to collect a website rating. That part works fine. When trying to click on the stars to highlight the clicked and all prev (prevAll) stars and change the source to staron.gif but nothing happens on click. I want to use the delegate function to do this, and then a function. My function is not working.
$('#websiteButton').mousedown(function() {
var inputSite = prompt("Enter one of your favorite website urls");
var appendHTML = "<div class=\"webfav\"><a href='"+inputSite+"'>"+inputSite+"</a> <img id=\"s1\" src=\"staroff.gif\"/><img id=\"s2\" src=\"staroff.gif\"/><img id=\"s3\" src=\"staroff.gif\"/><img id=\"s4\" src=\"staroff.gif\"/><img id=\"s5\" src=\"staroff.gif\"/> <br></div>";
$('#sect2').append(appendHTML);
});//end of add favorites
$('.webfav').delegate('img', 'click', function() {
$(img, this).attr('src', 'staron.gif');
$(img, this).prevAll().attr('src', 'staron.gif');
});
I've also tried just this and this.id

I ended up just needing to move "});//end of add favorites" to the bottom after the delegate function executed. It was executing before the stars were added to the page the way I had it.

addclass to floatbox popup with same click that opens the popup

I have a gallery that opens with floatbox plugin. The problem is that i want to addclass to the popup div as the gallery opens. Before the popup opens the html is not hidden, its just not generated yet. I've tried few things, the last one is with timeout, but it doesn't work.
var delay = $(".gallery_floatbox");
function timeout(){
setTimeout(function() {
delay.addClass('asd');
}, 2000); }
$('.afd_gallery_first a').click(function(){
timeout(); });
NOTE: for other div this code works, but for the popup it doesn't.

You can try afterBoxStart callback like,
Add in your anchor tag HTML,
<a href="your-linkp" class="floatbox" data-fb-options="afterBoxStart:'myFunc();'">
talk about fruit
</a>
In Script,
var delay = $(".gallery_floatbox");
function myFunc() {
delay.addClass('asd');
return true;
}

jQuery Mobile more buttons for one function

I use an external header for a Multi-Page Template JQM 1.4
$('#pageprostoriheader').load('header.html', function () {
$.mobile.pageContainer.pagecontainer("getActivePage").enhanceWithin();
});
$('#pagetestheader').load('header.html', function () {
$.mobile.pageContainer.pagecontainer("getActivePage").enhanceWithin();
});
In the header I have a button with ID gumbiskanje, that opens a popup dialog.
$(document).on('click', '#gumbiskanje', function(e){
var niz = $('#niziskanje').val();
prikaziiskanje(niz);
window.location.href = "#pageiskanje";
});
when i had only one page worked all fine, but now that i have multiple page. It only works on the first page in html, but on other pages it doesn't start the dialog.

Update
Popup div should be either place internally as a child of page div, or externally outside page div.
If placed externally, you need to call the below function in order to enhance/create it. Then you will be able to call it from any page.
$(function () {
$("[data-role=popup]").popup();
});
To call it
$(document).on("click", "#gumbiskanje", function () {
$("#popupLogin").popup("open");
});
Demo
If you have the same popup in each page with the same id, you need to call it from within the active page too.
$(document).on("click", "#gumbiskanje", function () {
var active = $.mobile.pageContainer.pagecontainer("getActivePage");
$(active).find("#popupLogin").popup("open");
});
Demo

jQuery click event with class selector only fires once

I'm using classed links to change FlowPlayer content. Here is a working version: http://jsfiddle.net/r9fAj/
In my actual page using the same code the first link clicked works fine. The second one does not fire the click function at all. Even if I comment out everything but the console.log()...
$('.playerLink').click( function() {
audioPlayer.unload();
initAudioPlayer();
$('#player').css('display', 'block');
$('#player').animate({"height":"50px"}, 1000);
var newClip = {'url':$(this).attr('ajax-data'),'autoplay':true};
audioPlayer.play(newClip);
console.log('playing ' + $(this).attr('ajax-data'));
});
HTML like so
Listen
Listen
<a id="flowplayer" href="/audio/episodes/09_27_2013_Happy_Hour_88509726.mp3"></a>
And the player initialized like so:
var audioPlayer;
var initAudioPlayer = function () {
$f("flowplayer", "/player/flowplayer-3.2.16.swf", {
plugins: {
controls: {
fullscreen: false,
autoHide: false,
}
},
clip: {
autoPlay: false,
url: "",
}
});
audioPlayer = $f();
};
initAudioPlayer();
Since the jsFiddle works over and over I assume something else in my page is preventing the second click() from working but the console has no errors for me.
So my question is, short of posting the whole site's code how do I pursue debugging this?

So it sounds like your .click() event handler is only being fired for the first link you click and not for additional clicks. For general debugging, you could take your page that is not working and gradually comment out / remove other part of the JS and HTML until you are able to make it work correctly. Or start with the minimal amount that is working (the fiddle) and gradually add in the rest to see when it stops working.

So this is the first site I have done where content is delivered via AJAX and internal links are caught by
$("a:not([href^='http://'])").click( function(e) {
var url = $(this).attr("href");
var title = ($(this).attr("title")) ? ': ' + $(this).attr("title") : '';
e.preventDefault();
if(url!=window.location){
window.history.pushState({path:url},title,url);
$('#contentMain').load(url);
document.title = "It's New Orleans" + title;
}
});
For some reason it does work once to click a link with the class but the second time gets preventDefault()ed.
Listen
The fix was adding [href^='#'] to not() e.g.
$("a:not([href^='http://'],[href^='#'])").click( function(e) {

Jquery .ClickOut Event

Hi everybody,
I have some issue with one of my project. I'm currently developing a toolbar for Google Chrome. The concept is that my extension insert by using a content script an iframe in every page i visit. Materialized in Red on my Printscreen.
After that i've created another iframe who appear when i click on the "Menu" Button. This iframe appear like a dropMenu. Materialized in orange in the printscreen.
Well now let me explain my problem :
When i click on the "dropMenuButton" i execute this code :
$( "#dM1").click( function() {
dropMenu('dropMenu1', $(this).position().left);
});
To be clear the function "dropMenu" will call my background page (by messaging exchange) to show or hide the dropMenu, in function if it's allready activated or not.
Here is the executed code by the "dropMenu function"
if(document.getElementById("dropMenu"))
{
$("#dropMenu").slideUp(800, function() {
$(this).remove();
});
}
else
{
var body = $('body'),
MenuURL = chrome.extension.getURL(dropMenuPage + ".html"),
iframe = $('<iframe id="dropMenu" scrolling="no" src="'+MenuURL+'">');
body.append(iframe);
$("#dropMenu").hide().slideDown(800);
// Shift the menu (Left)
$("#dropMenu").css({left: marginLeft+'px'});
}
So the event on dropMenuButton work perfectly but i want to provide some ameliorations like a .ClickOut event. What i want is that when somebody click outside the dropMenu (in orange) the menu will be hide.
I've tried a lot of things but nothing work...
Hope somebody will provide me some help !
Thanks in advance.
Edit (Injection) :
I've tried to inject the javascript like this :
var injectJs = $('<script type=text/javascript>' +
'$(document).click(function() {' +
'dropMenu("dropMenu1", 0);' +
'});');
body.append(injectJs);
injectJs = $('$("#dropMenu").click( function(e) {' +
'e.stopPropagation();' +
'});' +
'</script>');
body.append(injectJs);
But it didn't seems to inject on the page. It should have a problem somewhere...

Can't you just add a click event on the document? Then on the actual drop down menu (or any other events where you don't want to hide the drop down) prevent any clicks from bubbling up:
$(document).click(function(){
// hide drop down clicking anywhere on page:
$("#dropMenu").slideUp(800, function() {
$(this).remove();
});
});
$("#dropMenu").click( function(e) {
e.stopPropagation(); // prevent click on drop menu from removing the drop down.
});

It works great but like this :
$(document).click(function(){
// hide drop down clicking anywhere on page:
dropMenu('slideUp', 0);
});
$("#dM1").click( function(e) {
e.stopPropagation(); // prevent click on drop menu from removing the drop down.
dropMenu('dropMenu1', $(this).position().left);
});
Now i have to insert the similar code on the global page, someone have an idea how i can insert dynamically a js code ?