We Keep Coding

dynamic <a></a> doesn't run with jquery

I want to make a web site for a photos.
Inside a dynamic div created with a jquery function (.append) there is this anchor:
<a href='#' style='color:green;' id='"+this.foto_id+"' data-id='"+this.foto_id+"' class='modificaDataFoto modificaDataFoto"+this.foto_id+"'>Modifica</a>
The page is load normally and if I use the browser debugger I see all the HTML code including all dynamic data from database...
But if I try to set a class of the anchor in a jquery function it doesn't run:
$('.modificaDataFoto').bind('click', function(event) {
event.preventDefault();
var idFotoModifica= $(this).attr("data-id");
console.log(idFotoModifica);
$("dataFoto"+idFotoModifica).focus();
$("dataFoto"+idFotoModifica).css("color", "red");
$(this).attr("class", "modificaDataFotoConferma");
});
Why does that function not work?

.bind() only works on elements that are already present in the DOM. It's likely that you're trying to bind the click event to the element before the dynamic element exists.
There are two ways to fix this:
wait until after the <a> element has been appended to the document before running your $('.modificaDataFoto').bind(), or
Delegate the click event from a non-dynamic element (or the document itself):
$(document).on('click', '.modificaDataFoto', function() {
// this is essentially the same as your existing function; I've
// consolidated it a bit and removed the no-longer-needed preventDefault.
$("dataFoto" + $(this).attr("data-id")).css("color", "red").focus();
$(this).attr("class", "modificaDataFotoConferma");
}

Use this code:
$(document).on('click', '.modificaDataFoto', function(event) {
event.preventDefault();
var idFotoModifica = $(this).attr("data-id");
console.log(idFotoModifica);
$("dataFoto"+idFotoModifica).focus();
$("dataFoto"+idFotoModifica).css("color", "red");
$(this).attr("class", "modificaDataFotoConferma");
});

I'm not entirely sure if I understood your question but if you are trying to change the element's class name then you can simply do this:
$( this ).switchClass( "old class", "modificaDataFotoConferma", 1000, "easeInOutQuad" );
instead of
$(this).attr("class", "modificaDataFotoConferma");
You also have the .toggleClass()
EDIT:
You can also use removeClass() and then use the addClass().

jQuery each blocking code when listening to a wrong element

I suppose to add a click event to all selected element, the question is:
why I cannot use el to add the event and become the listener.
If I use el the whole block of code stopped running and seems stuck in each loop.
This is the code that runs correctly
$( ".selected" ).each(function(index) {
$(this).on("click", function(){
});
});
console.log("at reach")
This is the code that wrong:
$( ".selected" ).each(function(index, el) {
el.on("click", function(){
});
});
console.log("out of reach")

If you look at the documentation for each in jQuery it shows
function
Type: Function( Integer index, Element element )
A function to execute for each matched element.
And if you look up Element in jQuery
An element in the Document Object Model (DOM)
So you are treating a DOM element as if it were a jQuery object. You would need to wrap it in jQuery to turn it onto a jQuery object just like you do with this
$( ".selected" ).each(function(index, el) {
$(el).on("click", function(){
});
});
So why does the console log line show up? Because the browser encounters and error when you try to call on() method on an element that does not have an on method. Your developer console should have the error VM279:2 Uncaught TypeError: el.on is not a function

why I cannot use el to add the event and become the listener.
You can't attach click event to DOM element el using the jQuery on() method, you could instead cast the element using $() :
$(el).on("click", function(){
//Your logic
});
If I use el the whole block of code stopped running and seems stuck in each loop.
That because you're trying to call a jQuery method on DOM element, so normally you'll get :
Uncaught TypeError: el.on is not a function
Suggested solution :
But you don't need no loop here you could attach the click event to all the elements with the given selector using :
$( ".selected" ).on("click", function(){
//Your logic here
});
Hope this helps.

jquery and Jplist jquery plugin table data with many pages

$( '#list' ).on( "click", ".list-item", function( event ) {
event.preventDefault();
console.log( "toto" + $(this).text());
var $this = this;
$(this).addClass('selected');
$('.list-item').not($this).removeClass('selected');
});
Hello, I have a problem with the line $('.list-item').not($this).removeClass('selected'); which doesn't work for div present in another pages when navigated. thank you for your help.

I don't know that particular plugin, but I looked into it and it seems it caches the 'other' pages somewhere while they are not displayed. At the moment your script is executed the elements are not existing in the DOM.
You will have to run a code similar to yours everytime the plugin loads a page:
// event "loadNewPage" is not an actual event; you will have to figure out which callbacks/hooks/events your plugin offers
$( '#list' ).on( "loadNewPage", function( event ) {
$('.list-item').removeClass('selected');
});
This only works if your changes are cached as well, otherwise you will have to save the selected element in your javascript and reselect it everytime the plugin displays a page.

In the JPList plugin, when you navigate only the content of the div elements are replaced and not the complete div. So, you'll have to reset the selected class upon navigation or any such event.
While initializing the plugin with default options use 'redrawCallback'
i.e.,
redrawCallback: function() {
$('.list .selected').removeClass('.selected');
}
The above code will reset the selected class upon the div.
and also update your code to be
$( '#list' ).on( "click", ".list-item", function( event ) {
$('.list .selected').removeClass('selected');
event.preventDefault();
console.log( "toto" + $(this).text());
var $this = this;
$(this).addClass('selected');
});
Try this approach, as this would first remove the existing selected class from the elements and add selected class to clicked element

Page Change Event

My Fiddle
http://jsfiddle.net/sx9Rt/2/
My problem
I have a page, called page1. After I navigate to page2, I want to CHANGE page1 so that next time it is visited, it will look in a certain way (for example, background-color blue). I want to make this change only AFTER the end of the transition to page2.
I was trying to correctly use the pagecontainerchange event in JQM 1.4 and it wouldn't work for me. I don't want to use the pagechange event because it has been deprecated.

Updated FIDDLE
The pagecontainershow event of the pagecontainer widget runs after the animation to the new page is complete. In the event you can check the toPage or prevPage properties to figure out where you came from and where you are going.
$( ":mobile-pagecontainer" ).on( "pagecontainershow", function( event, ui ) {
var prevPageID = ui.prevPage.prop("id");
if (prevPageID == "page1"){
toDoAfterTransition();
}
});

Fiddle updated: http://jsfiddle.net/sx9Rt/13/
Use this:
$( ":mobile-pagecontainer" ).on( "pagecontainerhide", function( event, ui ) {
$("#page1").css('background', 'blue');
});
API doc: http://api.jquerymobile.com/pagecontainer/

You can use Javascripts setInterval function to check the visibility of the page.
var prevPage;
$(document).on('click', 'a[data-role="button"]', function(){
prevPage = $(this).parents('[data-role="page"]');
var checkVisibility = setInterval(function() {
if(!$(prevPage).is(':visible')) {
$(prevPage).css('background', 'blue');
clearInterval(checkVisibility);
}
}, 10);
});
Fiddle: http://jsfiddle.net/sx9Rt/11/

jquery on() selector not working on mobile browsers/dynamically created content

I am having problem with jquery on selector.
When I am using
$('.class').on("click",function(){
//Code
});
its working on mobile devices but fails to select dynamically created content
so I changed to
$( document ).on('click', '.class' ,function(){
//Code
});
Now that it works for dynamically created contents but is no longer supported on mobile browsers such as Opera Mini or Uc Browser How can I make it work on all conditions.

Ok finally Resolved it of My own:
add the required code in an function:
and take an variable temp to store temporary boolean value
var temp=true;
function function($this){
//Code
}
$('.class').on("click",function(){
var $this = $(this);
function($this);
temp=false;//making temp false to avoid re execution.
});
$( document ).on('click', '.class' ,function(){
if(temp){
var $this = $(this);
function($this);
}else{
temp=true;//making temp true for next event.
}
});