Develop Reference

Why is event.stopPropagation not cancelling $('html').click?

I have an input field which has a focusout event on it. I also have a click event set on $('html') which transfers focus to a different input field. I wrote a click handler for my input field and put in event.stopPropagation(); but it doesn't seem to be working. What am I missing? What does $('html') refer to? My code:
p.replaceWith(
"<input class='memoryEditField' type='text' value=" + p.text() + ">"
);
var inputField = $(".memoryEditField");
inputField
.on("click", function(event) {
event.stopPropagation();
})
.on("focusout", editFieldLostFocus)
.on("keyup", editFieldKeyPressed);
The other input field:
$("html").on("touchstart", function() {
MQInput.focus();
});
$("html").on("click", function() {
MQInput.focus();
});

Please provide all of code (what is p in Your code? Also editFieldLostFocus, editFieldKeyPressed).
I think You're missing something in methods editFieldLostFocus, editFieldKeyPressed and it makes illusion that stopPropogation does no work
In fact it works as expected:
$(function() {
$('p').each(function() {
var p = $(this);
p.replaceWith(
'<input class="memoryEditField" type="text" value="' + p.text() + '">'
);
});
function editFieldLostFocus() {
console.log('call editFieldLostFocus');
}
function editFieldKeyPressed() {
console.log('call editFieldKeyPressed');
}
var inputFields = $(".memoryEditField");
inputFields
.on("click", function(event) {
event.stopPropagation();
console.log('memoryEditField clicked');
})
.on("focusout", editFieldLostFocus)
.on("keyup", editFieldKeyPressed);
$("html").on("touchstart", function() {
console.log('MQInput.focus');
//MQInput.focus();
});
$("html").on("click", function() {
console.log('MQInput.focus');
//MQInput.focus();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>FIELD 1</p><br/>
<p>FIELD 2</p><br/>

disable a link after click using jQuery

I have a number of links (A elements) STYLED AS buttons with class "btn" and when one of them is clicked, I want that particular button to be disabled. this code doesn't work:
$('.btn').on('click', function(e) {
$(this).prop('disabled',true);
});
There are a gazillion tutorials for preventing the default event of a form submit button, and then disabling that, but that is not quite what I need...
Apparently, my $this isn't pointing to the correct object, or something =)
----------- UPDATE ---------------
SORRY, update above. The element I have is not a button, it is a link styled as a button...

Don't try to disable the Anchor tag. Try to set the href instead.
$('.btn').on('click', function(e) {
e.preventDefault();
$(this).off("click").attr('href', "javascript: void(0);");
//add .off() if you don't want to trigger any event associated with this link
});

You only need to stop defaultevent from links.
$('.btn').on('click', function(e) {
$(this).prop('disabled',true);
e.preventDefault();
});

This works for me:
$('a').css("pointer-events", "none");

In my case I used the following:
onclick="$(this).css('pointer-events', 'none');"

It works fine.
$('.btn').on('click', function(e) {
$(this).prop('disabled',true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<button class='btn'>But1</button>
<button class='btn'>But2</button>
</div>

Instead of using this, you can just specify your target by using its id.
$('.btn').on('click', function(e) {
$('#btn2').prop('disabled',true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="btn1" class="btn">Button</button>
<button id="btn2" class="btn">Button</button>
<button id="btn3" class="btn">Button</button>
Hope it helps

$('.btn').on('click', function(e) {
$(this).attr('disabled', true);
});
Check this post: https://stackoverflow.com/a/5876747/5243272

This works (in chrome), but perhaps some drawbacks?
$('.btn').on('click', function(e) {
if( $(this).prop('disabled') == true) {
return false;
}
$(this).prop('disabled',true);
});

$(document).ready(function() {
$('.btn').on('click', function(e) {
e.stopPropagation();
e.preventDefault();
alert('I have been clicked!');
$(this).css('pointer-events', 'none').css('cursor', 'default');
});
});
This will prevent any other further clicks on that link.

If your Html like this
This is another paragraph.
use below code :
$(".test").one("click", function() {
var clas = $(this).attr("class");
setTimeout(function() {
$("." + clas).removeAttr('href');
}, 100);
});
If your Html like this
<button class="btn">This is another paragraph.</button>
use below code :
$(".btn").one("click", function() {
var clas = $(this).parent().attr("class");
setTimeout(function() {
$("." + clas).removeAttr('href');
}, 100);
});

Delete a textbox using jQuery

$(document).ready(function() {
var textBoxCount = 0;
$('body').append('<input type="button" id="add" value="add">');
$('#add').click(function() {
textBoxCount++;
$('body').append('<br><input type="text" id="textBox-'+textBoxCount+'"><input type="button" class="deleteTextBox" id="deleteTextBox-'+textBoxCount+'" value="x">');
});
$('.deleteTextBox').click(function() {
$(this).prev().remove();
});
});
I don't get the TextBoxes deleted !

The clicked element (.deleteTextBox) is not present on document ready, so $('.deleteTextBox').click() cannot detect it.
Try on():
$(document).on('click', '.deleteTextBox', function() {
$(this).prev().remove();
});

Try this updated fiddle
$('body').on('click', '.deleteTextBox', function() {
$(this).prev().remove();
$(this).remove();
});

Can you use .load() to load html into div's with dynamic id's?

I'm trying to load html into div's that have dynamically created id's by passing the id to the function as a data attribute. Doesn't seem to work though.
<script>
$(document).ready(function(){
$('input:radio').on('ifChecked', function(event){
var clauseDivID = $(this).data("clause-div-id");
$("#" + clauseDivID).load("inc-files/test.htm #test", function() {
alert("The load was performed.");
});
});
});
</script>

Have you tried something like this? Please look at the valid event names for jQuery. 'ifChecked' is not one. http://api.jquery.com/category/events/
$('input[type="radio"]').on('change', function (e) {
if($(this).prop('checked'))
{
var clauseDivID = $(this).data("clause-div-id");
$("#" + clauseDivID).load("inc-files/test.htm #test", function() {
alert("The load was performed.");
});
}
});

Not an answer, just a couple of things to try. Please let us know the results if this doesn't lead you to the solution:
<script>
$(document).ready(function(){
$(document).on('ifChecked', function(event){
alert('received the click');
});
});
</script>
<script>
$(document).ready(function(){
$(document).on('ifChecked', function(event){
var clauseDivID = $(this).data("clause-div-id");
alert('clauseDivID: ' + clauseDivID );
});
});
</script>

while loop over takes the each method

I am adding element to page using the static number according to the click of user. so the element has the serial number according to the user click.
when user click on any of the element and deletes, i need to re-arrange the serial number. i try using the each operator with while loop, but not working.
any one suggest me the right way pelase.
here is my try:
var num = this.clipsLength, clipNum=1;
while(this.clipsLength > 0){
$.each(this.collection.pages, function(index, page) {
$.each(page, function(n, cs) {
var title = $(cs).find('span.text');
title.html('Clipping' + clipNum); //always 0 or all clips are '0'
});
});
--this.clipsLength;
clipNum = num-this.clipsLength;
}
for the try here is the fiddle:
Live Demo

do you mean something like reset the number?
http://jsfiddle.net/Lgwow5pt/2/
$('#content').on('click', '.remove', function () {
$(this).parent().remove();
$('span').each(function(i, item){
item.lastChild.textContent = i+1;
});

Demo
Try this
var htmlT = '<span>x</span>';
i=1;
$('#content').on('click', '.remove', function () {
$(this).parent().remove();
i = 1;
$('#content span').each(function() {
$(this).html('<a class="remove" href="#">x</a>'+i);
i++;
});
})
$('.add').click(function () {
$('#content').append($(htmlT).append(i));
i++;
});

Here it works
I modified your fiddle.
http://jsfiddle.net/khaleel/Lgwow5pt/7/
$('#content').on('click', '.remove', function () {
$(this).parent().remove();
var l= $("#content").find('span').length;
$('#content').empty();
i=1;
for(var j=0;j<l;j++){
$('#content').append($(htmlT).append(i));
i++;
}
})
Hope you accept the solution

Well ..according to your fiddle i tried to resolve the issue. Hope this helps.
change the click event on .remove with the following:
$('#content').on('click', '.remove', function () {
j=i-2;
i=1;
$(this).parent().remove();
$("#content").html("");
for(k=0;k<j;k++)
$('.add').trigger('click');
})