Develop Reference

jQuery code wont work in IE7

I use jQuery1.11.1 and execute this code:
var links= $("#custom-menu").find("li").find("a");
links.each(function(){
if($(this).attr("href")==="#openModal")
{
$(this).on("click",function(event){
alert("Click event called on li");
$("#openModal").css("visibility","visible").fadeIn();
alert("Is the table showing now");
});
}
});
This works in IE8 but it does not work in IE7,nothing happens when I click the li.
EDIT:
I have narrowed it down,the control does not go into this block:
if($(this).attr("href")==="#openModal")

I found that an internal/in-page href attribute on IE7 looks like this:
http://localhost:8080/MyProject/mypage#openModal
instead of #openModal
So,instead of using this
if($(this).attr("href")==="#openModal")
I used:
if($(this).attr("href")==="#openModal" || $(this).attr("href") ===(window.location.href+"#openModal"))

Click function on dynamic created elements that shows content of clicked element

I have created a search page that has on top and bottom page navigation. This is a simplified version just to show my problem:
$(function(){
$("select").on("click" , function(){
if ($(this).val() == 10){
var total_pages = 3;
}
else{
var total_pages = 5;
}
var pages = "";
for (var i = 1; i <= total_pages; i++) {
var pages = pages + "<span class='page'>" + i + "</span>";
}
$(".pagination").html(pages);
});
$("select").click();
$(".page").on("click" , function(){
alert($(this).text());
});
});
And you can try it yourself here:
JSFiddle
In this example you have 5 pages when you select 10 items per page and 3 pages for 20 results per page. But when you select an other value per page the alert function doesn't show up anymore. It seems that changes, after the document is loaded, are not being noticed by the document.ready function.
I searched and saw a lot of familiar questions and their solutions. I can imagine also some alternatives but not the one who can satisfy me. Because unfortunately I don't know now a simple solution without a lot of extra code with id's, classes, data-attributes etc. Who can contribute me some knowledge for a good solution?

That's because when you do this:
$(".pagination").html(pages);
You remove old DOM elements and it's "click" functions and replace it with new HTML.
Add this:
$(".page").on("click" , function(){
alert($(this).text());
});
right after first line I mentioned

Event delegation is a good practice when you deal with dynamic content. In your case, you can attach the click event to the parent.
I just tweaked one line in your original code:
$(".pagination").on("click" , ".page" , function(){
alert($(this).text());
});
Live demo: http://jsfiddle.net/zkDF4/6/

document.ready() function not executed, works in dev console

I'm trying to simulate a click in a tabbed div when the page loads.
To do this I use:
$(document).ready(function() {
$("#tab_inbox").click();
});
However, this doesn't seem to work, but when I enter this in the dev console on Google chrome, it does work..
$("#tab_inbox").click();
To show the tabs, I use this code:
$("#tab_inbox").click(function() {
$("#othertab").hide();
$("#tab_inbox").show();
});
Anybody knows what's wrong?

Try this:
$(document).ready(function() {
setTimeout(function () {
$("#tab_inbox").trigger('click'); //do work here
}, 2500);
});

I read in your comment that you're using show/hide techniques and I assume you need the click for an initial display option? If so, hide (or show) your element(s) specifically in the code rather than saying click to hide/show. So
$(document).ready(function() {
$("#tab_inbox").hide();
}
Or try core JavaScript and use
window.onload = function() {
// code here
}
window.onload waits until everything is loaded on your page, while jQuery's .ready() may fire before images and other media are loaded.

you can try making your own function with pure JS:
document.getElementById('triggerElement').addEventListener('click', funtction(e) {
document.getElementById('hideElement').style.display = 'none';
document.getElementById('showElement').style.display = 'block';
}, false);

jQuery zClip copy to clipboard, for multiple links in bootstrap dropdown?

If this cant be done for cross-browser, then any comments would be much appreciated.
What I am trying to achieve is multiple "copy to clipboard" links on my page like this for example...
Copy Original Link
Copy Medium Link
Copy Web Link
Just not really having much luck getting anything to work.
I am using zClip, and trying to fire using jQuery onClick and a data attribute, like below.
But just cannot get it to work. See fiddle.
var copyText = 0;
$("a.copy").on('click', function () {
var copyText = $(this).attr('data-copy');
return false;
}).each(function () {
$(this).zclip({
path: 'http://zeroclipboard.googlecode.com/svn-history/r10/trunk/ZeroClipboard.swf',
copy: copyText,
beforeCopy: function () {
},
afterCopy: function () {
alert(copyText + " has been copied!");
}
});
});
Please see my new fiddle here with zClip jquery plugin being used.
http://jsfiddle.net/Vr4Ky/5/
Thank in advance for any suggestions.

Here is an updated demo that does what you are trying to do:
Using this (the same) HTML:
Copy Original Link
<br />
Copy Medium Link
<br />
Copy Web Link
This script should work:
$("a.copy").on('click', function (e) {
e.preventDefault();
}).each(function () {
$(this).zclip({
path: 'http://www.steamdev.com/zclip/js/ZeroClipboard.swf',
copy: function() {
return $(this).data('copy');
}
});
});
Here is what I did. First off the alert that you were adding via afterCopy is actually the default, so you don't need to add extra code for that. Also the data-copy attributes should be accessed via jQuery's data function. Finally I put the SWF reference to the same host as the JavaScript (this might not be necessary depending on the
security code in the SWF but it seemed necessary to get the jsfiddle to work.

Using Jason Sperske solution, I have found a work around to fix the issue when used inside a bootstrap down.
This is how to get the function to work with bootstrap dropdowns.
$('.btn-group').addClass('open');
$("a.copy").on('click', function (e) {
e.preventDefault();
}).each(function () {
$(this).zclip({
path: 'http://www.steamdev.com/zclip/js/ZeroClipboard.swf',
copy: function() {
return $(this).data('copy');
}
});
});
$('.btn-group').removeClass('open');
Then this css also needs adding, to stop the flash file absolute div positioning outside of the list element.
.dropdown-menu li {
position: relative;
}
See working fiddle. http://jsfiddle.net/Vr4Ky/27/

Basic jQuery problems

I am struggling with jQuery for a long time now. It is very powerful and there are lot of great things we can do with jQuery.
My problem is that I use a lot of jQuery features at the same time. E.g. I have a site that displays items, 12 items per page and I can paginate through the pages using jQuery. On the same page I implemented a thumpsUp button that uses jQuery too.
The more jQuery features I use, the harder it gets to arrange them properly. E.g.:
$(document).ready(function() {
$(".cornerize").corner("5px"); //cornerize links
$('a#verd').live('click', exSite); //open iframe
$("a.tp").live('click', thumpsUp); //thumps up
$("a#next").click(getProgramms); //next page
$("a#previous").click(getProgramms); //previous page
//for the current page reload the content
$("a#page").each(function() {
$(this).click(getProgramms);
});
//this isn't working...
$('.smallerpost').live('click', alert('test'));
});
Have a look at the last code line. I want to perform an alert when the div element is clicked. Instead of doing so the page shows me the alert when I refresh the page. A click on the div has no effect.
What am I doing wrong? What would be a strategy here to have clean and working jQuery?

Change that line to
$('.smallerpost').live('click', function () {
alert('test');
});
and while you're there...
$("a#page").each(function() {
$(this).click(getProgramms);
});
has exactly the same effect as:
$('a#page').click(getProgramms);
... but technically there should be only one element with id='page' anyway

Your code $('.smallerpost').live('click', alert('test')); calls the alert immediately and passes its return value into the live function as the second parameter. What you want to pass there is a function to call, so you want:
$('.smallerpost').live('click', function() {
alert('test');
});
or
$('.smallerpost').live('click', handleSmallerPostClick);
function handleSmallerPostClick() {
alert('test');
}
...depending on how you structure your code.