My blur event fires but not my click event. If I remove the blur event code the click event works fine.
How do I change the order these events fire?
$.fn.autoComplete = function () {
$(document).on('click', '#' + settings.resultsDivId + ' tr', function () {
console.log('click fired');
$('#' + settings.resultsDivId).hide();
});
this.on('blur', function () {
console.log('blur fired');
$('#' + settings.resultsDivId).hide();
});
function AutoComplete(term) {
// ajax call stuff
}
};
Changing click to mousedown solved it. Apparently click fires after blur.
Blur event stops click event from working?
Related
I have 2 seperate event listeners, the first one is a click event, second one is a window beforeunload listener:
This is the click event listener:
document.body.addEventListener('click',function(event){
if (event.defaultPrevented) return;
console.log('click EL');
})
and this is the beforeunload listener:
window.addEventListener("beforeunload", function (e) {
e.preventDefault();
console.log('beforeunload EL');
})
Can I stop the click event from firing if the beforeunload is fired? I've tried doing it with event.preventDefault(); still it didn't work.
Try this, This is working code:
var beforeunload = function (e) {
e.preventDefault();
console.log('beforeunload EL');
}
window.addEventListener("beforeunload", beforeunload);
document.body.addEventListener('click',function(event){
if (event.defaultPrevented) return;
console.log('click EL');
window.removeEventListener("beforeunload", beforeunload);
});
Just remove the listener if your click happened
I have a textbox that uses onblur and ondblclick - when they double click it opens a pop screen but I don't want the onblur to be triggered.
When the double click function is called I removed the onblur attribute to stop it getting triggered. This works but now I'm trying to add the onblur back after the pop up opens but it's not working
function OpenCust(v) {
$('#<%= txtDebtor.ClientID %>').removeAttr('onblur');
shadowboxopen = true;
if (!v || 0 === v.length) {
}
else {
Shadowbox.open({
content: "lookups/Customer.aspx?NODEBT=true&CustomerAC=" + v,
player: "iframe",
onClose: function () { shadowboxopen = false; },
title: "Edit Customer"
});
}
$('#<%= txtDebtor.ClientID %>').attr('onblur');
}
edit:
Changed code to use on and off for the blur function but the onblur is still getting triggered when the double click OpenCust is being called.
textbox: <asp:TextBox runat="server" ID="txtDebtor" onblur="CheckIfAccountCodeDebtValid(this.value)" ondblclick="OpenCust(this.value)"></asp:TextBox>
function OpenCust(v) {
$('#<%= txtDebtor.ClientID %>').off('blur', CheckIfAccountCodeDebtValid(v));
shadowboxopen = true;
if (!v || 0 === v.length) {
}
else {
Shadowbox.open({
content: "lookups/Customer.aspx?NODEBT=true&CustomerAC=" + v,
player: "iframe",
onClose: function () { shadowboxopen = false; },
title: "Edit Customer"
});
}
setTimeout(function() {
$('#<%= txtDebtor.ClientID %>').on('blur', CheckIfAccountCodeDebtValid(v));
}, 2000);
}
You will have to specify the value of the onblur when re-adding it. The correct functions in jQuery to do this are on() and off(). In the example below you can see how I remove the blur event handler after clicking on the button but after 2 seconds ill add it again. If the button loses focus within these 2 seconds there won't be a blur console message. If it loses focus after it does.
//Add blur event handler to the button
$('#button').on('blur', blurFunction);
//Add click event handler to the button
$('#button').on('click', function() {
//Remove blur event handler
$('#button').off('blur', blurFunction);
console.log('click');
setTimeout(function() {
//reattach blur event handler after 2 seconds
$('#button').on('blur', blurFunction);
}, 2000);
});
//The actual blur event handler function
function blurFunction() {
console.log(this.value);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="button" type="button" value="test-value">
With the function that uses a parameter you can wrap it in an anonymous function like in below snippet.
//Add blur event handler to the button
$('#button').on('blur', function() {
CheckIfAccountCodeDebtValid(this.value);
});
//Add click event handler to the button
$('#button').on('click', function() {
//Remove all blur event handlers
$('#button').off('blur');
console.log('click');
setTimeout(function() {
//reattach blur event handler after 2 seconds
$('#button').on('blur', function() {
CheckIfAccountCodeDebtValid(this.value);
});
}, 2000);
});
//The actual blur event handler function
function CheckIfAccountCodeDebtValid(value) {
console.log(value);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="button" type="button" value="test-value">
I am using this code for the click handling on a button inside my page:
$(document).on("click", $('#' + GlobalVariables.currentUserType).find(".addDocumentToSection"), function (e) {
addItemToDocumentGrid();
$('#removeDocumentFromSection').disable(true).addClass("disabled");
$('#removeSelection').disable(true).addClass("disabled");
});
But the event fires as soon as I click anywhere in the page. Even if it is not the supposed button which I want to select with $('#' + GlobalVariables.currentUserType).find(".addDocumentToSection").
$('#' + GlobalVariables.currentUserType).find(".addDocumentToSection") returns one element which is actually the button which I want to be selected.
Why does it behave like that?
If you want to use event delegation, the second argument should be a selector, not a jQuery object.
$(document).on("click", '#' + GlobalVariables.currentUserType + " .addDocumentToSection", function (e) {
// ---------------------^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
addItemToDocumentGrid();
$('#removeDocumentFromSection').disable(true).addClass("disabled");
$('#removeSelection').disable(true).addClass("disabled");
});
If you don't want to use event delegation, you need to call on on the element you want to hook the event on:
$('#' + GlobalVariables.currentUserType).find(".addDocumentToSection").on("click", function (e) {
addItemToDocumentGrid();
$('#removeDocumentFromSection').disable(true).addClass("disabled");
$('#removeSelection').disable(true).addClass("disabled");
});
This is all covered in the on documentation.
You are attaching onClick event to a document element. Try:
var button = $('#' + GlobalVariables.currentUserType).find(".addDocumentToSection");
button.on("click", function() {
addItemToDocumentGrid();
$('#removeDocumentFromSection').disable(true).addClass("disabled");
$('#removeSelection').disable(true).addClass("disabled");
});
$('#' + GlobalVariables.currentUserType).find(".addDocumentToSection").on("click", function(e){
});
jQuery can use selectors before the .on("click", this should work for you.
I want to trigger click event on a element when mousedown occurs. Also, I want to enable this feature for all elements in a html page.
Is it possible with jQuery on Chrome ?
Here's my first attempt;
$.fn.mousedown = function (onclick) {
this.bind("click", function (e) { onclick.call(this, e); });
return this;
};
But this mousedown elements fired after click occurs.
$(document).on('mousedown', function (e) { $(e.target).trigger('click') })
I'm not sure though for what this should be useful.
To prevent the second click (which is the normal click) you have to do some extra work
$(document).on('mousedown', function (e) {
$(e.target).trigger('click').once('click', function (e) {
e.preventDefault();
e.stopPropagation();
});
})
Here's a fiddle illustrating the problem. I am adding a jQuery one binding on the click of one element to the 'html' element. I am not expecting the 'one' event handler to fire until the next click, but it fires on the click that adds the binding. This seems to not be a problem if it is a more specific element that the 'one' event handler is added to, but it happens when I use 'html' or 'body' as the element, which is what I want to do.
This doesn't make sense to me, I'd think the first click would add the one for the next click and it wouldn't fire on the click on the link.
By the way, my actual problem could probably be solved in a better way, but I came across this and was curious why it didn't work as I expected.
Code:
html:
<div id='hello'>hello</div>
<a class="title" href="#">this example</a> is a test
js:
$(function() {
$('a.title').click(function() {
var htmlClickBind = function (e) {
console.log('clicked on html, e.target = ' + e.target);
console.log(e.target == '');
if (!$(e.target).is('a') ) {
console.log('cleared click event');
}
else {
$('html').one('click', htmlClickBind);
}
};
$('html').one('click', htmlClickBind);
});
});
The click event on the a.target element bubbles up to the html element, where your (just-added) handler sees it.
To prevent this, use event.stopPropgation in your a.target click handler (or return false, which does stopPropagation and preventDefault).
Updated code (see the comments): Live copy
$(function() {
// Accept the event arg ----v
$('a.title').click(function(e) {
// Stop propagation
e.stopPropagation();
var htmlClickBind = function (e) {
console.log('clicked on html, e.target = ' + e.target);
console.log(e.target == '');
if (!$(e.target).is('a') ) {
console.log('cleared click event');
}
else {
$('html').one('click', htmlClickBind);
}
};
$('html').one('click', htmlClickBind);
});
});