I've this code:
document.getElementById('form1').innerHTML = user_selections.stockyard_html[sel];
alert('click handler registered');
$("#" + register_btn_id).click(function (event){
alert("Clicked");
});
After html overwrite of form html which was saved yesterday, there is a register button whose click I'm not able to catch. What could be the reason?
Put it inside document ready:
$(function() {
$("#" + register_btn_id).on('click', function(e) {
alert('clicked')
)}
})
Related
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 have an autocomplete dropdown using twitter-typeahead as follows:
$('#Data').typeahead(
{
displayKey: 'description',
source: myData.ttAdapter(),
templates: {
empty: [
'<div class="empty-message">',
<a class="js-not-found" href="#">No results found</a>,
'</div>'
].join('\n'),
suggestion: function (data) {
return '<span>' + data.description + '</span>';
}
}
}
);
When no results are found the dropdown display a link. I have wired this to a Jquery on click handler as below but when I click the link it just reloads the page?
$(".js-not-found").click(function (e) {
e.preventDefault();
// some stuff
});
The event handler works fine if I have a normal link outside of the dropdown as follows <a class="js-not-found" href="#">No results found</a>
The link is not inside the DOM when you attach the event. For dynamically generated elements you should use on.
Can you try :
$(document).on('click','.js-not-found', function (e) {
e.preventDefault();
// some stuff
});
For better performance it's recommanded to use the direct ancestor inside the DOM of the generated element :
$(".container").on('click','.js-not-found', function (e) {
e.preventDefault();
// some stuff
});
Using delegate() function you can click on dynamically generated HTML elements that are not in your DOM.
Example:
$(document).delegate('.js-not-found', 'click', function()
{
e.preventDefault();
//your code
});
or you can use on() as
$(document).on('click', '.js-not-found', function()
{
// your code
});
<a href="#" class="submit-form show-field" data-show-field="#Product" >View products</a>
This link is dynamically added to the dom, and I fire a jQuery function on click
$('body').on("click", 'a.show-field', function(e) {
if (!$(this).attr('data-show-field')) {
return;
}
$($(this).attr('data-show-field')).parent().show();
e.preventDefault();
});
The event fires fine, but page redirects. I cant understand what I've done wrong
You event is fired before you can prevent it.
$('body').on("click", 'a.show-field', function(e) {
e.preventDefault();
if (!$(this).attr('data-show-field')) {
return;
}
$($(this).attr('data-show-field')).parent().show();
/*e.preventDefault(); */
});
If the page redirects then I think your listener is not working well.
Here you are a plunker with a use case.
With and whithout document ready
I don´t know where you put your code, but if it's outside the "document ready" that listener never fires.
$('body').on("click", 'a.show-field', function(e) {
alert("First attemp is attached");
});
$(document).ready(function() {
$('body').on("click", 'a.show-field', function(e) {
alert("Second attemp is attached");
if (!$(this).attr('data-show-field')) {
return;
}
$($(this).attr('data-show-field')).parent().show();
e.preventDefault();
});
});
PD: sorry for my english
I'm trying to select the list anchor link using jquery. Though 'list' link doesn't exist in the page as shown in the console output, it seems 'click' is still getting triggered. What could be causing 'list' and 'add' to trigger?
I have this simple code using jquery 1.10.2:
<!-- List -->
Delete
Add
<script>
jQuery(document).ready(function($) {
if ($('a[href$="#list"]').length>0){
console.log('list found');
}else{
console.log('list not found');
}
function opentab(value){
console.log('opentab: ' + value );
//perform task here
}
$(document).on('click', 'a[href="#list"]', opentab('list'));
$(document).on('click', 'a[href="#add"]', opentab('add'));
});
</script>
console output:
list not found
opentab: list
opentab: add
Here's jsfiddle link: http://jsfiddle.net/2FHf6/
you need to declare a function in the event that when this event occurs call this function, currently the method inside event is called on page load as your way of calling is not right:
do like this:
$(document).on('click', 'a[href="#list"]', function(){
opentab('list')
});
$(document).on('click', 'a[href="#add"]', function(){
opentab('add')
});
UPDATED FIDDLE
$(document).on('click', 'a[href="#list"]', function(e){
opentab('list');
});
$(document).on('click', 'a[href="#add"]', function(e){
opentab('add');
});
Demo:
http://jsfiddle.net/XJhN6/
See this updated fiddle.
When you want to call a function on an event triggered and the function needs to pass values, you have to do it in an "wrapper" function, like this:
jQuery(document).ready(function($) {
if ($('a[href$="#list"]').length>0){
console.log('list found');
}else{
console.log('list not found');
}
function opentab(value){
console.log('opentab: ' + value );
//perform task here
}
$(document).on('click', 'a[href="#list"]', function() {
opentab('list');
});
$(document).on('click', 'a[href="#add"]', function() {
opentab('add');
});
});
Otherwise it will be called when the event listener is set, not on the actual event.
I have this code:
$('input.ShowResellerAccounts').on('click', function(){
if($(this).is(':checked')){
$('tbody#pages').hide();
} else {
$('tbody#pages').show();
}
});
which hides/shows a table tbody id on click.
how can i make this code run on page load as well as on click?
In the document.ready function you can trigger the click event like
$('input.ShowResellerAccounts').trigger('click');
Separate it into a function and bind in on load as well as on click:
function checkInput(){
if($(this).is(':checked')){
$('tbody#pages').hide();
} else {
$('tbody#pages').show();
}
});
$(document).ready(function() {
$('input.ShowResellerAccounts')
.on('click', checkInput) // bind to click
.each(checkInput); // call now
});
u can use $(document).ready :
$(document).ready(function(){
//put your code here
});