Develop Reference

jQuery click event on disabled input field

I want to trigger an event on a disabled input. I have tried the following code, nothing happened - there was no error, the even just didn't fire.
$(document).on('click', '.select-row', function(e){
...
});
How do I fix this?

You can't fire any mouse event like click on a disabled HTML element. Alternative of this, is to wrap up the element in a span or div and perform the click event on those.
$("div").click(function (evt) {
// do something
});​
One more alternate is to make the element readonly instead of disabled, but bear in mind that jQuery does not have a default :readonly selector.

If it works for you, you may use readonly instead of disabled. Then you can use the click event with ease.
Demo

We had today a problem like this, but we didn't wanted to change the HTML. So we used mouseenter event to achieve that
var doThingsOnClick = function() {
// your click function here
};
$(document).on({
'mouseenter': function () {
$(this).removeAttr('disabled').bind('click', doThingsOnClick);
},
'mouseleave': function () {
$(this).unbind('click', doThingsOnClick).attr('disabled', 'disabled');
},
}, '.select-row');

This my solution
<div class="myInput"><input type="text" value="" class="class_input" disabled=""></div>
Jquery:
$("body").on("click", ".myInput", function(e) {
if($(e.target).closest('.class_input').length > 0){
console.log('Input clicked!')
}
});

If you need to trigger, use trigger() function.
$('.select-row').trigger('click');

How to disable links even after adding a new link?

I would like to disable clicking on links in the preview and show an error message instead. I came up with a simple solution:
<div id="preview">
<p>There is a sample link that should not follow to google.com</p>
<ul></ul>
</div>
<button id="btn">Add a new link</button>
JavaScript code:
$('a').on('click', function () {
alert("links are disabled");
return false;
});
$('#btn').on('click', function () {
$('#preview ul').append('<li><p>another link</p></li>');
});
It works perfectly fine for the already existing links but not for the new links added via the button.
How to disable links even after adding a new link?
I would like to keep the logic for disabling links out of the code for adding a new links (as there are multiple places that are adding a new link)
JS fidddle: http://jsfiddle.net/bseQQ/

To capture events on dynamic elements you need to use a delegated selector:
$('#preview').on('click', 'a', function () {
alert("links are disabled");
return false;
});
This is because events are attached on load, and obviously dynamic elements do not exist at that point. A delegate event is attached to a parent element, but only fired when the filtered selector bubbles the event through the DOM.

Working demo http://jsfiddle.net/P6Hbg/
API: .on - http://api.jquery.com/on/
This should fit your cause :)
code
$(document).on('click','a', function () {
alert("links are disabled");
return false;
});

You'd better use event delegation:
$('#preview').on('click', 'a', function() {
alert('links are disabled');
return false;
});
Here #preview is used as a static parent element.

$('#btn').click(function () {
$('#preview ul').append('<li><p>another link</p></li>');
});

How to activate <a> event by clicking on another element

<div class="imgtumb"><img src="..."></div>
sometext
<script>
$(document).ready(function() {
$('div.imgtumb img').click(function() {
$('a.imgtarget').click();
});
});
</script>
The link not work (dont open a big image). What i do wrong?
----Edited----
Thank you guys, but .trigger() is not working too. I resolved this problem something like this:
$(document).ready(function() {
$('div.imgtumb img').click(function() {
window.location.href = $('a.imgtarget').attr("href");
});
});
----Edited 2---
Question which explained why .click() is not working with a tag

try this:
<script>
$(document).ready(function() {
$('div.imgtumb img').click(function() {
$('a.imgtarget').trigger('click');
});
});
</script>
the event trigger is the event to make another event to an element
http://api.jquery.com/trigger/

use trigger()
. A call to .trigger() executes the handlers in the same order they would be if the event were triggered naturally by the user:
try this
$('a.imgtarget').trigger('click');
instead of
$('a.imgtarget').click();

try to use this instead of .click()
window.open(
'toBigImg',
'_blank'
);

Image not clickable after loaded via AJAX

I have a set of images that are loaded via jQuery AJAX. For some reason, my click handler won't trigger when it is clicked.
JavaScript:
$(document).ready(function()
{
$('img.delete_related_sub').click(function()
{
alert('testing');
});
//I added this part to test, because the above wasn't working...
$(document).click(function(event)
{
alert(event.target.tagName+' '+event.target.className);
});
});
HTML:
<img data-rsid="2" class="delete_related_sub" src="image.png" />
So my 2nd click handler alerts me with "IMG delete_related_sub". But the first one isn't triggered. The is actually in a table that is actually in a pane run by bootstrap tabs, not sure if that'd actually help though.

Try it like this
$(document).on('click', 'img.delete_related_sub', function() {
alert('testing');
});
Just replace document with a static parent of your image.

Use this:
$("body").on('click', 'img.delete_related_sub', function() {
alert('testing');
});
Or, in the success: give this:
$('img.delete_related_sub').click(function() {
alert('testing');
});

Because the line to bind the event runs before the element is added, try using
$(parent).on('click', 'img.delete_related_sub', function() {});
where the parent is a static element that will be there for sure. This works because the event is bound to an element that actually exists, then checks to match your selector. See .on() for more details.
Something like
$(document).on('click', 'img.delete_related_sub', function() {});
would work fine.

$('.delete_related_sub').live("click", function()
{
alert('testing');
});
Use live event to listen clicks

jQuery events and .load()

Never ran into this problem with jQuery before. I have the following:
$(document).ready(function() {
$('#browser_cat a').click( function() {
$('#browser_cat').hide();
$('#browser_cat').load('/api/browser/catchildren/'+$(this).attr('id'));
$('#browser_cat').fadeIn();
return(false);
})
});
Pretty simple stuff. And it works, however the data gathered by .load() doesn't retrigger the event. It is a drill-down category type thing ... so level-1 does the load but then leve-2 bails to the href rather than triggering the click() event again.
The loaded HTML is a #browser_cat with links, and the generated DOM is OK.
I appriciate this is elementary. Thanks in advance.
Answer modified code:
$(document).ready(function() {
$('#browser_cat a').live("click", function() {
$('#browser_cat').hide();
$('#browser_cat').load('/api/browser/catchildren/'+$(this).attr('id'));
$('#browser_cat').fadeIn();
return(false);
})
});

Use live event
Attach a handler to the event for all
elements which match the current
selector, now or in the future.
Replace
$('#browser_cat a').click( function() {
with
$('#browser_cat a').live("click", function() {