We Keep Coding

jquery DOM mutation

I have made this:
<span class="a">test 1</span><div></div>
Why .b does not activate the alert?
$( ".a" ).click(function() {
$('div').html('<span class="b">test 2</span>');
});
$( ".b" ).click(function() {
alert("Hello");
});
I do not understand how to detect the mutation of the DOM.

since .b is created after the query was done. when you call $(".b") in your script nothing is found, and the click event is not attached to it. You can solve it by attaching the event to the document like so:
$(document).on("click", ".b", function () {
alert("hello");
});

The click() binding you're using is called a "direct" binding which will only attach the handler to elements that already exist. It won't get bound to elements created in the future. To do that, you'll have to create a "delegated" binding by using on().
$('div').on("click", ".b", function () {
alert("hello");
});

The selector runs on execution, meaning that .b was already searched for when the page loaded, rather than after you added the dom.
To demonstrate how selectors run in line, the code works if you define it right after appending the element:
$( ".a" ).click(function() {
$('div').html('<span class="b">test 2</span>');
$( ".b" ).click(function() {
alert("Hello");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="a">test 1</span><div></div>
However, the correct way of doing this would be to define a parent-based selector. The following is setting a click event to the parent that filters the target for the .b selector.
$( ".a" ).click(function() {
$('div').html('<span class="b">test 2</span>');
});
$(document.body).on("click", ".b", function () {
alert("Hello");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="a">test 1</span><div></div>

jQuery window.one("click") Not Working on Mobile

I have a modal that uses jQuery to popup on (document).ready.
$(document).ready(function() {
$("#openModal").toggleClass("target");
});
$(window).one( "click", function() {
$( "#openModal" ).toggleClass("target");
});
It works fine on desktop, but on iOS Safari it doesn't close on tap.
I read about the cursor:pointer fix, but it doesn't want to work in this scenario. I'm guessing this is because the event is binded to the window while the cursor is binded to the element.
And I obviously can't put body{cursor:pointer;}
What could this be caused by ?

Using .one will only trigger this for the first click on the window, therefore if you tapped (clicked) on the window before the modal opens, the function will not run again. Try using this:
$(window).on( "click", function() {
$( "#openModal" ).toggleClass("target");
});
Edit after your response:
I guess you want the modal to open only once on document ready, then do it like this, avoid using toggleClass and use this instead:
$(document).ready(function() {
$("#openModal").addClass("target");
});
$(window).click(function() {
$( "#openModal" ).removeClass("target");
});

$(window).one('click touchstart', function () {
$( "#openModal" ).toggleClass("target");
});

Prevent parent click from firing if a specific child is click

I want to prevent my parent click method to fire if the user clicks on a specific child element.
Example html:
<div data-type="parent_holder" style="width:500px; height:500px;">
<div data-type="child_holder" style="width:50px; height:50px; position:absolute;">
click
</div>
</div>
Example js:
I use jquery on in my js because I attach the element dynamically to a sortable list.
$( "#sortable" ).on( "click", "[data-type=parent_holder]", function() {
alert('parent');
});
$( "#sortable" ).on( "click", "[data-type=child_holder]", function() {
alert('child');
});
So what I want is, when a user clicks on the parent_holder it should alert parent, but if the user clicks on the child_holder it should alert child, and not alert parent.
I have searched stackoverflow and I have tried many of the suggestions, like :not(), bubbling, stopPropagation(), but I can't seem to get the right result.

Sounds like event propagation is happening in your case,
just avoid that by using event.stopPropagation()
Try,
$( "#sortable" ).on( "click", "[data-type=child_holder]", function(e) {
e.stopPropagation();
alert('child');
});
DEMO

Use:
e.stopPropagation();
or
return false;
in child click handler to prevent event propagation from parent events.

If for some reason you still need the click event to bubble from child element, you could filter instead the target inside parent click handler:
$( "#sortable" ).on( "click", "[data-type=parent_holder]", function(e) {
if(!$(e.target).is('[data-type=parent_holder]')) return;
alert('parent');
});
--DEMO--

JQueryUI: Button inside a draggable div not working when div is dropped

First post on StackOverflow.
I tried to resume the issue in the title, and I made a jsfiddle here:
http://jsfiddle.net/gBBcj/
The html generated seems correct, but the button in the dragged div does not work.
I even tried to redefine it as a .button(), but with no success.
Thanks for your help!
$(".box").draggable({
helper: 'clone'
});
$("#left").droppable({
accept: '.box',
drop: function (e, ui) {
$(this).append('<div class="box"></div>');
var droppedBox = $(this).children().last();
$(droppedBox).html(ui.helper.html());
}
});
$(".myButton").click(function () {
alert("Clicked");
});

Use .on()
Read Event Delegation
Syntax
$( elements ).on( events, selector, data, handler );
$(".container").on('click', '.myButton', function () {
alert("Clicked");
});
Fiddle Demo

The click() binding applies to the elements that exists at the time when you first attach it. It does not apply for the newly added elements.
Use on("click") method to attach the click event, as in Tushar Gupta's answer. It attaches a delegate to the container that will handle the "click" of the newly added elements.

Is this port of Prototype to JQuery correct?

We have code that will run if the user is idle for a certain amount of time.
(doStuff resets a countdown)
Existing code in Prototype:
Event.observe(window, 'mousemove', function() { doStuff(); });
Event.observe(window, 'scroll', function() { doStuff(); });
Event.observe(window, 'click', function() { doStuff(); });
Event.observe(window, 'focus', function() { doStuff(); });
Event.observe(window, 'blur', function() { doStuff(); });
Event.observe(window, 'keypress', function() { doStuff(); });
Event.observe(document, 'mousemove', function() { doStuff(); });
Event.observe(document, 'scroll', function() { doStuff(); });
Event.observe(document, 'click', function() { doStuff(); });
Event.observe(document, 'focus', function() { doStuff(); });
Event.observe(document, 'blur', function() { doStuff(); });
Event.observe(document, 'keypress', function() { doStuff(); });
I am looking to replace it with this JQuery:
$(document).ready(function() {
$(document).bind("mousemove scroll click focus blur keypress", doStuff);
});
It checks out when I test it, but can anyone confirm I don't have to do the document/window check, or that I didn't overlook anything else? Thanks.

Close, this is a complete port (added window) and the Document ready test isn't needed:
$([document, window]).bind("mousemove scroll click focus blur keypress", doStuff);
You can pass an array to the jQuery function so what you set up applies to more than one item. In this case, you already have references to window and document. This is how you can do it in one call.
However, I don't think all the original Prototype code was needed. For instance, focus and blur dont' apply to the document and click, mousemove and keypress isn't needed on the window.
This might be more what you want:
$(window).bind("focus blur scroll", doStuff);
$(document).bind("click mousemove keypress scroll", doStuff);
DOM Ready not needed: The DOM ready test is not needed because you already have access to document and window immediately. Waiting for DOM ready is needless.

That Prototype code is...non-optimal to say the least, and not for any reason related to Prototype.
Your rewrite looks fine other than that you've dropped window. If not hooking the events on window is valid in jQuery, it's valid in Prototype.
A similar rewrite in Prototype making similar assumptions (but including window):
$w('mousemove scroll click focus blur keypress').each(function(evtname) {
document.observe(evtname, doStuff);
Event.observe(window, evtname, doStuff);
});
...and I wouldn't be surprised to find that even that's more verbose than it actually needs to be.