jQuery .click() not working, while other jQuery functions do - javascript

I'm trying to create a Greasemonkey userscript that will click on one of the divs on the page. They don't refer to a link, more likely a JS/Ajax function, but I can't tell if that is true. So the problem is that this script does nothing. Jquery functions like .remove() work, but .click() does not. What exactly is wrong? I tried searching questions on this topic, but none seemed to help.
Code on page:
<div style="display: block;" class="oitm">
<div class="item">
<img class="smallimg" src="">
</div></div>
<div style="display: none;" class="oitm">
<div class="item">
<img class="smallimg" src="">
</div></div>
My code:
$( document ).ready(function() {
var reqItem = $('.oitm[style*="display: block"]');
$(reqItem).click();
});
Please note, that
reqItem.click();
does not work as well.
Upd: there is also a jquery code, but it's placed outside of the elements I posted above (#offer.left is an element where a clicked item is supposed to show up after it's clicked).
<script>
$("#offer").on( "click", ".item", function() {
if ($('#offer .left').children().size() < 9) {
$(this).parent().appendTo('#offer .left');
}
});
</script>

Your code works as expected: http://jsfiddle.net/5zddqx28/ .
JS:
$( document ).ready(function() {
$('.oitm[style*="display: block"]').click(function() {
alert('clicked');
});
var reqItem = $('.oitm[style*="display: block"]');
$(reqItem).click();
});
Make sure you put onclick listener before your .click(); call.

Your code works fine:
<div style="display: block;" class="oitm">
<div class="item">Top Div
<img class="smallimg" src="">
</div>
</div>
<div style="display: none;" class="oitm">
<div class="item">Bottom Div
<img class="smallimg" src="">
</div>
</div>
$( document ).ready(function() {
var reqItem = $('.oitm[style*="display: block"]').click();
$(reqItem).on('click',function(){ alert('I was clicked'); });
$(reqItem).click();
});
https://jsfiddle.net/7xnLoumt/

A selector that looks at the style attribute only works for browsers that format the style in exactly that way, or leaves the attribute in the original format when the code is parsed. You can use the :visible selector to find the visible elements:
var reqItem = $('.oitm:visible');

Related

Add number to end of div with jQuery

I'm using jQuery to create a simple addClass on hover. Hovering over a #science-panel-number div triggers a class of .active to be added to an #iphone-screen-number div.
Here is my jQuery:
$('#science-panel-1').hover(function(){
$('#iphone-screen-1').addClass('active');
},function(){
$('#iphone-screen-1').removeClass('active');
});
$('#science-panel-2').hover(function(){
$('#iphone-screen-2').addClass('active');
},function(){
$('#iphone-screen-2').removeClass('active');
});
$('#science-panel-3').hover(function(){
$('#iphone-screen-3').addClass('active');
},function(){
$('#iphone-screen-3').removeClass('active');
});
My HTML:
<div class="col-md-4">
<div id="science-panel-1" class="science-panel__item">
Content goes in here!
</div>
<div id="science-panel-2" class="science-panel__item">
Content goes in here!
</div>
<div id="science-panel-3" class="science-panel__item">
Content goes in here!
</div>
</div>
<div class="col-md-4">
div id="iphone-screen-1" class="iphone-screen-item">
<img src="IMG-url-here.jpg" alt="" />
</div>
div id="iphone-screen-2" class="iphone-screen-item">
<img src="IMG-url-here.jpg" alt="" />
</div>
<div id="iphone-screen-3" class="iphone-screen-item">
<img src="IMG-url-here.jpg" alt="" />
</div>
<div id="iphone-screen-4" class="iphone-screen-item">
<img src="IMG-url-here.jpg" alt="" />
</div>
<div id="iphone-screen-5" class="iphone-screen-item">
<img src="IMG-url-here.jpg" alt="" />
</div>
<div id="iphone-screen-6" class="iphone-screen-item">
<img src="IMG-url-here.jpg" alt="" />
</div>
</div>
<div class="col-md-4">
<div id="science-panel-4" class="science-panel__item">
Content goes in here!
</div>
<div id="science-panel-5" class="science-panel__item">
Content goes in here!
</div>
<div id="science-panel-6" class="science-panel__item">
Content goes in here!
</div>
</div>
This feels like a lot of code to do the same script. Is there a way to have one piece of script that can add the numbers it self? As #science-panel-1 will always link to to #iphone-screen-1 and so on.
This will do what you need. Just apply the handlers to elements whose ID begins with science-panel-, which should cover all of them...
$("[id^=science-panel-]").hover(function() {
// get the corresponding iphone-screen element id
var iphoneScreen = "#" + this.id.replace("science-panel-", "iphone-screen-");
$(iphoneScreen).addClass("active");
},function() {
var iphoneScreen = "#" + this.id.replace("science-panel-", "iphone-screen-");
$(iphoneScreen).removeClass("active");
});
I recommend changing the markup to include the data you need to drive the script:
<div data-target="#iphone-screen-1" id="science-panel-1" class="science-panel__item">...</div>
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
This allows you to select all the science panel items at once:
$('.science-panel__item')
and perform the exact same script on each of them:
$('.science-panel__item').hover(function () {
$($(this).data('target')).addClass('active');
// ^^^^^^^^^^^^^^^^^^^^^^
// use the data-target attribute as a selector
}, function () {
$($(this).data('target')).removeClass('active');
});
If you change the attribute and the selector, you'll have a reusable feature you can apply to any element:
$('[data-hover-target]').hover(function () {
$($(this).data('hoverTarget')).addClass('active');
}, function () {
$($(this).data('hoverTarget')).removeClass('active');
});
I'd firstly ask if the active class is strictly necessary? Can what you want be achieved with CSS if it is for styling only by using the :hover pseudoclass?
If you do need the .active class for some reason, I would change the markup to be a little more generic so that all the science panels had a CSS class of .science-panel and all the iphone screens had a class of .iphone-screen. Then you could simplify the JS to look like
$('.science-panel').on('mouseenter mouseleave', function(e) {
$(this).find('.iphone-screen').toggleClass('active', e.type === 'mouseenter');
});
This will find the .iphone-screen inside of the .science-panel that you hover over and toggle the class to on if the mouse enters and off when the mouse leaves it.
edit: I see you've updated your answer to include your markup, this answer was assuming that your iphone-screens were nested in the science-panels so this won't necessarily work for you if you don't/can't nest your markup

slideToogle not working properly with dynamically generated elements

I have the following code:
<div class="item-wrapper">
<div class="item-inner-wrapper">
<div class="some-class">Stuff</div>
<div class="this-class">
<a class="button alt small hide-description">Toggle Description</a>
</div>
</div>
<div class="item-child-desc">SOMETHING HIDDEN</div>
</div>
And this is the script I use to display .item-child-desc:
$(document).ready(function(e) {
$(".hide-description").on("click", function(e) {
$(e.target).parents(".item-wrapper").find(".item-child-desc").slideToggle(500);
});
});
... that is initiated hidden:
.item-child-desc {
display: none;
}
item-inner-wrapper gets generated every time a button is pressed and Toggle Description is displayed in a new row.
The JavaScript code I tried to create is not really working. I tried many different approaches but nothing. It only makes the first row item disappear, the others the event doesn't work.
EDIT > RESOLVED
Either John's or Saar's version works fine and it must be put on . Otherwise the script will be copied together with the rows and executed n times. That's why it was not working properly when I clicked to show the div.
here is a fiddle that use jQuery event delegation:
http://jsfiddle.net/hz0q0yys/3/
$(document).ready(function(e) {
$("#container").on( "click", "a.hide-description", function(e) {
console.log(e.target);
$(e.target).parents(".item-wrapper").find(".item-child-desc").slideToggle(500);
});
});
Try event delegation this way
$(document).ready(function(e) {
$(document).on("click", ".hide-description", function(e) {
$(e.target).parents(".item-wrapper").find(".item-child-desc").slideToggle(500);
});
});
.item-child-desc {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="item-wrapper">
<div class="item-inner-wrapper">
<div class="some-class">Stuff</div>
<div class="this-class">
<a class="button alt small hide-description">Toggle Description</a>
</div>
</div>
<div class="item-child-desc">SOMETHING HIDDEN</div>
</div>

On click not working after appending checkbox elements in jquery

The contact_container div holds contact children, within these children is a checkbox. I use ajax to append these children to the container. Once I append the html and click a childs checkbox. The .click does not recognize the newly added checkboxes, Only the children work on page load. Below are working samples of my HTML and Jquery.
Can you offer a solution so that the appended checkboxes are picked up when they are clicked? Thanks
Here is my HTML markup:
<div id="contact_container">
<div class="contact">
<div class="contact_checkbox">
<div class="checkbox_container">
<div class="checkbox">
<input class="testing_checkbox" type="checkbox" name="contacts[]" value="bf6b0049059ec8998601f8fe20acb68ecafe2d44">
</div>
</div>
</div>
<div class="contact_info">
<div class="contact_image">
<img src="image.jpg" width="50" height="50" alt="Profile Picture">
</div>
<div class="contact_name"><span>Caroline Airey</span>
</div>
</div>
</div>
</div>
<div id="x_message" class="inputdata" style="overflow: hidden; display: none;">
<label>Message:</label>
<span><textarea name="x_message" placeholder="Enter a message to send to your contact(s)"></textarea></span>
<div class="clear"></div>
<button class="form_button">Add Contact to Network</button>
</div>
Here is my Jquery:
$( ".checkbox" ).click(function() {
var checked = $('.testing_checkbox:checked').length;
$('#testing').val(checked);
if (checked > 0){
$('#x_message').show(1000);
}
else{
$('#x_message').hide(1000);
}
});
You will need the Parent reference to bind the element properly to jquery try this
$(parentObj).on("click",".checkbox",function() {
var checked = $('.testing_checkbox:checked').length;
$('#testing').val(checked);
if (checked > 0){
$('#x_message').show(1000);
}
else{
$('#x_message').hide(1000);
}
});
The parentObj is the div or the html element you've appended the html code with ajax call
Use this jQuery method instead:
$(".checkbox").on("click", function()
{
// Your code here
});
This will grab clicks from elements that are dynamically added to your page after it initially loads :)

Count divs and add jquery to expand and collapse Text

I hope someone can help. There are 3 divs with employee-block class in the html code included. I would like to add javascript/jquery code to expand/collapse anything after the 2nd div (or employee-block div). This is my html:
<div class="employee-block">
<img alt="test" title="test" src="/images/42.png" /><div class="employee-details"><span class="red strong">TEST</span><br /><p>test description</p></div>
</div>
<div class="bottom"></div>
<div class="employee-block">
<div class="employee-details"><span class="red strong">support#.net</span><br /><p>testing description</p></div>
</div>
<div class="bottom"></div>
<div class="employee-block">
<img alt="test" title="test" src="/images/42.png" /><div class="employee-details"><span class="red strong">TEST</span><br /><p>test description</p></div>
</div>
<div class="bottom"></div>
I have this jquery code, but not sure how to plug it in. In my example html code I only want to hide/show the 3rd employee-block div, so really anything more than 2 because there could be more than 2:
<script type="text/javascript">
$(document).ready(function () {
$('div.view').hide();
$('div.slide').click(function () {
$('div.view').slideToggle(400);
return false;
});
});
Your question is not very clear for me, but look at this code:
$('a.createSomeButton').click( function() {
if ( ! $('#IwillCollapse').length ) {
$('.employee-block:gt(1)').wrap('<div id="IwillCollapse" />');
}
$('#IwillCollapse').slideToggle();
return false;
});
This should help you get on your way. There's many different ways to achieve what you want but this might be the easiest to grasp. http://jsfiddle.net/jSZxp/1/
var employeeBlocks = $('.employee-block').slice(2); //returns all after the first 2
employeeBlocks.addClass('hidden'); //attach the hidden class
$('button').on('click', function(){
employeeBlocks.toggle('hidden'); //toggles the hidden class
});

jQuery Rotate Function Img Selecting

I'm trying to use jQuery to rotate an image 90 degrees upon click on my div.
Why doesn't it work?
Here's my HTML ...
<div class="class1">
<div class="class2">
<img id="whatever">
</div>
</div>
.. and here's my jQuery ;
jQuery(document).ready(function() {
jQuery(".class1").click(function()
{
jQuery(this).find('img').rotate({animateTo:-90})
});
});
If it helps,
http://code.google.com/p/jqueryrotate/wiki/Examples
NOTE: I need the code to FIND the first image...not just get the image by id, then rotate it.
According to #Abdullah Jibaly post and look at comment. I think you miss something like
<script src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>
And here is an example to rotate at first image http://jsfiddle.net/oamiamgod/BeUBF/2/
Your code looks fine as is, I'd guess that the plugin is not being loaded or something else outside the given context went wrong.
To get the first img you can use:
jQuery(this).find('img').first().rotate({animateTo:-90})
// according to use it
<div class="class1">
<div class="class2">
<img src="https://www.google.com/images/srpr/logo3w.png">
<img src="https://www.google.com/images/srpr/logo3w.png" >
</div>
</div>
<button id='test'>click</button>
<script>
jQuery(document).ready(function() {
var setvalue=90;
jQuery("#test").click(function() {
jQuery('.class1').find('img').rotate({
animateTo: setvalue
});
setvalue=setvalue+90;
});
});
</script>
https://code.google.com/p/jqueryrotate/wiki/Examples
fisrt letter of class name should not be a number, change them to class1 and class2 instead and add quotation marks for animateTo value:
<div class="class1">
<div class="class2">
<img id="whatever">
</div>
</div>
$(document).ready(function() {
$(".class1").click(function(){
$(this).find('img').rotate({animateTo: "-90"})
});
});
try it
<div class="class1">
<div class="class2">
<img id="whatever">
</div>
</div>
jQuery(document).ready(function() {
jQuery(".class1").click(function()
{
$("#whatever").rotate(90);
});
});

Categories