The page is here:
http://cistrome.org/cps/seqconfig?did=2693
And the original js codes are below(this one works well):
$(document).ready(function(){
$(".open_gene").on('change', function(event) {
$('#Gene_field').show();
});
$(".close_gene").on("change", function(event){
$("#Gene_field").hide();
});
});
So the .close_gene has an event handler for change. But when I want to trigger this event manually to hide the #Gene_field, like this:
>>> $('.close_gene').trigger("change")
In FireBugs, the returned value is:
[input#nolimit_radio.close_gene all]
But the #Gene_field is not hidden..
I was wondering that why I can't trigger change event which should already bind to function(event){ $("#Gene_field").hide();}. Does anyone have ideas about this? Thanks!
Try this:
$(".close_gene").click();
Its working fine for me in Firebug Console... :)
Update:
This should also work, but will not change the state of radio button
$(document).ready(function(){
$(document).delegate(".open_gene",'change', function(event) {
$('#Gene_field').show();
});
$(document).delegate(".close_gene", "change", function(event){
$("#Gene_field").hide();
});
});
$('.close_gene').trigger("change");
Related
I am attaching a onclick function to the button#1 and according to this function i am changing other buttons' opacity and disabling user to click on them.
But I want to undo what has been changed onclick event, making other buttons as normal.
My javascript and jquery code as below;
btnLink.onclick = function(e) {
var divToShow = document.getElementById('linkNewDiv');
console.log('clicked');
divToShow.style.display = 'inherit';
$(btnVideo).prop('disabled',true);
$(btnVideo).addClass('opacityReducing');
$(btnPicture).addClass('opacityReducing');
$(btnPublish).addClass('opacityReducing');
$(btnPicture).prop('disabled',true);
$(btnPublish).prop('disabled',true);
$(btnCheck).addClass('opacityReducing');
}
I couldnt manage to figure it. I found a one way if user clicks outside of the elements I am changing elements style and disable property by writing all these codes again. Any better solutions ? Thanks :)
You can achieve this with stopPropagation(). I made some changes to your code to make it more readable, check this:
$(document).on('click', function(e) {
console.log('clicked');
$('#linkNewDiv').css("display", "inherit");
$(btnVideo, btnPicture, btnPublish).removeClass('opacityReducing').prop('disabled', false);
$(btnCheck).removeClass('opacityReducing');
});
$('#bnLink').on('click', function(e) {
e.stopPropagation();
console.log('clicked');
$('#linkNewDiv').css("display", "inherit");
$(btnVideo, btnPicture, btnPublish).addClass('opacityReducing').prop('disabled', true);
$(btnCheck).addClass('opacityReducing');
});
I have 5 checkboxes and 1 textarea in my form and would like to just hook OnChange() for all of these. However, for whatever reason nothing I have found on Stack Overflow seems to be getting called.
As this is the most basic example I found, what is wrong with this?
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"/>
<script type="text/javascript">
$(document).ready(function()
{
$("input").on("input", function()
{
alert("CHANGED");
});
}
</script>
you should handle change event:
$('input:checkbox,textarea').change(function () {
alert('changed');
});
The oninput event is only triggered when the text of an input changes, so it won't be fired for checkboxes. Try binding to the change event for checkboxes and the input event on textareas:
$("textarea").on("input", yourFunction);
$("input:checkbox").on("change", yourFunction);
function yourFunction() {
alert("CHANGED");
}
jsFiddle which demonstrates the above.
Note: The difference in this answer is the alert is triggered immediately in the textarea, not only on blur of the element.
Additional Note: The oninput event isn't supported in < IE9
Why you bind input event for checkbox, it's only fire for textarea?
You need to bind change event :
Try this one:
Updated
$(document).ready(function()
{
$("textarea").on("input", function(){
alert("CHANGED");
});
$("input").on("change", function(){
alert("CHANGED");
});
});
Try in fiddle
Checkboxes usually used with same name property so in selector name property will be usefull
$("input[name='interests']").change(function(){
/*some code*/
});
It will not work on textarea . you can assign all radio button and textarea a same class and then
$(".your_class_name").on("change", function()
{
alert("CHANGED");
});
I was wondering how to make this trigger work as I've tried all I can, but can't seem to find out the problem.
HTML
<div id="testFunc">Change AHref Class</div>
test
JavaScript
$(function () {
$("#testFunc").click(function () {
$('#testLink').removeClass("button");
$('#testLink').addClass("button2");
return false;
});
});
$(function () {
$(".button2").click(function () {
alert('test');
return false;
});
});
Somehow, the upon triggering testFunc which changes the source dynamically which causes the a href class to change from button to button2, it doesn't seem to register when i use button2 click.
Is there anyway to solve this?
Thanks!
Try .on()
Use Event Delegation.
$(document).on('click','.button2',function(){ code here });
Syntax
$( elements ).on( events, selector, data, handler );
Demo Working Fiddle , Problem Fiddle
I'm trying to change the data-url with jQuery. Currently my code looks like this.
<div id="twitterButton" title="Tweet it on Twitter">Tweet</div>
<script type="text/javascript">
$(document).ready(function () {
$('#twitterButton').click(function () {
$('#tweet').attr("data-url", "https://www.google.com/");
});
});</script>
As you can see I left the url-data blank so I could be sure it is only getting set in the jQuery. However whenever I click the tweet button it always opens the window with the link for the current page that I was on. Can someone explain how I can set it to be something else via jQuery or javascript?
You should use .data() for controlling data attributes. As Daniele states in that answer, you must also stop the event propogation on the a element using preventDefault().
$('#twitterButton').click(function (e) {
$('#tweet').data('url',"https://www.google.com");
e.preventDefault();
});
You must call the preventDefault() method to stop the propagation of the click event on the child a element:
Try this code:
$('#twitterButton').click(function (e) {
$('#tweet').attr("data-url", "https://www.google.com/");
e.preventDefault();
});
Good code
D.
I have a tag, and when 'focused' I display a . When I click on the document body I would like this to close. However, this doesn't seem to work when using two different event types:
<input id='input' />
<div id='div style='display:none;'>
</div>
$('#input').focus( function(e){
e.stopPropagation();
$('#div').show()
});
$(document).click( function(){
$('#div').hide();
});
It appears that the e.stopPropagation() only stop propagation of the 'onfocus' event. Since when I switch the code to be: $('#input').click(), then it works fine.
Just curious if there is anyway to make this work with the above code? (would like to know JS a bit better)
Thanks!
You can simply do this
$('#input').bind('focus blur', function() {
$('#div').toggle();
})
Check working example at http://jsfiddle.net/u9xwb/
You're right, it only kills the event you are subscribed to, you need to stop the click event as well on the input.
$('#input').focus( function(e){
e.stopPropagation();
$('#div').show();
}).click( function(e){
e.stopPropagation();
});
$(document).click( function(){
$('#div').hide();
});