We Keep Coding

DataTable can't get id element after page change

I am trying to make ajax call on focus for every text input, I can make is in first page( when document ready) but when I change page , javascript can't parse inputs because it wasn't created when document is ready. How can I fix it ?
jQuery(document).ready( function(){
jQuery('[id^=urun_sirasi-]').focus(function(){
event.preventDefault();
var urun_sirasi=jQuery(this).data('sira');
console.log(urun_sirasi);
jQuery('#urun_sirasi-'+urun_sirasi).bind('keyup',function(e)
{
console.log(jQuery("#urun_sirasi-"+urun_sirasi).val());
jQuery.ajax({
url:'../ajax.php',
data:'process=siralama&urun_id='+urun_sirasi+'&urun_sirasi='+jQuery.trim(jQuery("#urun_sirasi-"+urun_sirasi).val()),
success:function(e){
// e -> 1 ve ya0 geliyor.
console.log(e);
}
});
});
});
});
Thanks for your help.

This seems to a very common problem in the jQuery section. See the docs for .on() at http://api.jquery.com/on/, specifically the section about delegated events:
Delegated events have the advantage that they can process events from
descendant elements that are added to the document at a later time.

I use the following syntax in the doc ready that will create events for all future items with the "expand" class, should be able to be adjusted for you
$(document).on('click',"#myTable .expand", function(){
so yours should be something like this (maybe give your items a class rather than having an event to each element selector)
$(document).on('keyup',"#yourTable .urun_sirasi-key", function(){

How do I trigger a mouseenter (or any mouse) event on list items within a div with a z-index?

Every time I click on the list items only the z-index layer gets the mouse event. CSS has no trouble detecting the mouse hovering over the list item but I need jquery to display an image after retrieving the background-image from the list item's css.
For your convenience, I recreated it at jsFiddle: http://jsfiddle.net/VaDb6/
I've also tried this:
jQuery hover problem due to z-index
But this just made everything else clickable in the back, which is exactly what
I don't want and the reason why I made the div with a z-index.
I've also tried giving each child a z-index but still no response from the list items.
I will greatly appreciate any suggestions or guidance. Thanks in advance!

This has nothing to do with the z-index, what is happening is that the events are binded when your page loads, and the freshly inserted divs don't have events attached to them. Here's how to fix it:
$('div.gallery_shots li').on('click', function () {
// take the ancestor's html
var html = $(this).parent().parent().next().html();
$('div#layerZ').html(html + '<div id="debug"></div>').show();
});
$('div#layerZ').on('click', function () {
$('div#debug').append('layerZ...');
});
$('div#layerZ')
.on("click", "li", function(e) {
e.stopPropagation();
alert('li clicked');
})
.on("mouseenter", "li", function(e) {
e.stopPropagation();
//$('div#layerZ div.gallery_pictures li.current').removeClass('current');
//$(this).addClass('current');
//var url = $(this).css('background-image');
//url = url.replace('url(', '').replace('-thumb', '').replace(')', '');
//$('div#layerZ div.large_gallery').html('<img src="'+url+'"></img>');
$('div#debug').append('mouseenter event success!!!<br />');
});
With $('div#layerZ').on("click", "li", function(e) {...} you're telling the parent to listen on clicks done specifically on li. Since #layerZ exists at load time there's no problem binding the event.​
http://jsfiddle.net/LbqUC/

Removing elements of list using parent/child

I'm looking to dynamically remove li elements from several connected ul lists. Right now I am assigning 'dblclick' event behaviors by using $("#sortable1").children().on('dblclick',function() {...})
The items in #sortable1 will be moved to other lists (#sortable2, #sortable3, etc) by the user.
When a list item is double clicked, a dialog box pops up asking if the user would like to delete it. If the user says yes, I want the list item to be removed from whatever list it is in. I am trying to do it using something like:
$($(this).parent().childNodes[$(this).index()]).remove()
But that doesn't work.
Advice?

Something like this should work.
var showPopup = function( elem ){
//show your popup with a function like this, as i assume it already does...
$( '#delete_toggle' ).one( 'click', function(){
elem.remove();
});
};
$("#sortable1").children().on('dblclick',function(){
showPopup( $(this) );
});

To remove the element that was clicked on, you just use this in the event handler:
$(this).remove();
or if you've saved the element reference to a variable elem, it would be this:
$(elem).remove();
You are trying to make it way more complicated than need be. The jQuery .remove() method looks at who its current parent is and takes care of all that for you.

jQuery blur event fireing multiple times with dynamic content edit

When I click on a div element of a certain class, I change contenteditable to true. onblur of that clicked div I want it to alert something. The first time that I blur the div, it works fine, but after that it shows the same alert twice. So the first time, it alerts once. The second time, it alerts twice, etc.
What am I doing wrong?
content = $('#content');
content.delegate('div', 'click', function(event){
$(this).attr('contenteditable', 'true');
$(this).focus();
$(this).bind('blur', function(){
alert('blur');
});
});
Example: http://jsfiddle.net/W8que/4/

You're binding the blur again on each click. Each bind is new and they are stacking. Use .delegate() (or .on())for the blur function also.
fiddle: http://jsfiddle.net/W8que/11/
code:
content = $('#content');
content.on('click', 'div', function(){
$this = $(this);
$this.attr('contenteditable', 'true');
$this.focus();
});
content.on('blur', 'div', function(){
alert('blur');
});
Since the fiddle was already using jQuery 1.7.x, I went ahead and swapped out .delegate() for the more up-to-date .on(). Slipped in a few other things like caching $(this) and didn't bother passing the event into the function since there's nothing we need to preventDefault() or stopPropagation() on.

for prevent call multiple blur you can use 'off' before 'on'
for example :
$inputs.off().on("blur", function() {
})

jQuery: Any way to "refresh" event handlers?

I have two divs, one that holds some stuff and the other with all possible stuff. Clicking on one of the divs will transfer items to the other div. The code I came up with is:
$("#holder > *").each(function() {
$(this).click(function(e) {
$(this).remove();
$("#bucket").append(this);
});
});
$("#bucket > *").each(function() {
$(this).click(function(e) {
$(this).remove();
$("#holder").append(this);
});
});
This one works perfectly, except that the event handlers need to be refreshed once I append or remove elements. What I mean is, if I first click on an element, it gets added to the other div, but if I click on this element again, nothing happens. I can do this manually but is there a better way to achieve this?

Try jquery live events .. the $.live(eventname, function) will bind to any current elements that match as well as elements added to the Dom in the future by javascript manipulation.
example:
$("#holder > *").live("click", function(e) {
$(this).remove();
$("#bucket").append(this);
});
$("#bucket > *").live("click", function(e) {
$(this).remove();
$("#holder").append(this);
});
Important:
Note that $.live has since been stripped from jQuery (1.9 onwards) and that you should instead use $.on.
I suggest that you refer to this answer for an updated example.

First, live is deprecated. Second, refreshing isn't what you want. You just need to attach the click handler to the right source, in this case: the document.
When you do
$(document).on('click', <id or class of element>, <function>);
the click handler is attached to the document. When the page is loaded, the click handler is attached to a specific instance of an element. When the page is reloaded, that specific instance is gone so the handler isn't going to register any clicks. But the page remains so attach the click handler to the document. Simple and easy.

Here you go, using the more intuitive delegate API:
var holder = $('#holder'),
bucket = $('#bucket');
holder.delegate('*', 'click', function(e) {
$(this).remove();
bucket.append(this);
});
bucket.delegate('*', 'click', function(e) {
$(this).remove();
holder.append(this);
});

EDIT: don't use live, it be deprecated!
Take advantage of the fact that events bubble. Using .on():
var = function( el1, el2 ) {
var things = $('#holder, #bucket');
things.each(function( index ) {
// for every click on or in this element
things.eq(index).on('click', '> *', function() {
// append will remove the element
// Number( !0 ) => 1, Number( !1 ) => 0
things.eq( Number(!index) ).append( this );
});
});
any click on any element (existing at the time of bind or not) will bubble up (assuming you haven't manually captured the event and stopped propagation). Thus, you can use that event delegation to bind only two events, one on each container. Every click that passed the selector test of the 2nd argument (in this case, > *, will remove that element and then append it to the alternate container as accesesed by things.eq( Number(!index) )

Have you looked at jQuery's live function?

The most Efficient way (dont load all event for all elements) it:
//NORMAL FUNCTION
function myfunction_click(){
//custom action
}
$('id_or_class_of_element').on('click', myfunction_click);
//LOAD OR REFRESH EVENT
$(document).on('click', 'id_or_class_of_element', myfunction_click);