I have some nested <div>s where I want to call a function on click of one of the nested <div>, however I am not able to achieve it.
Here is my HTML :
<div class="seat available">
<div id="2020" class="seat-click"></div>
<div class="tootltip-text">
<p>Name : <span id="id31">Subham<span><button>Ok</button></span></span></p>
<p>Seat No :<span id="13-tooltip-count">111</span></p>
<p>Team :<span id="id32">Abc</span></p>
</div>
</div>
Here is my jQuery :
$('.seat-click').on('click', function () {
console.log('Hello');
});
For clear understanding, refer to https://jsfiddle.net/47s8q2pv/4/
Here, I want the click function to be called only when I click <div id="2020" class="seat-click"></div>.
This can be achieved if I change the jQuery to
$('.seat-click').on('click', function () {
console.log('Hello');
});
If I do so, then my <div class="tootltip-text"> will also call the same click function, which I don't want because I will have some buttons and clickable items inside the tooltip in future.
Is there any workaround for this?
Thanks in advance.
As #entiendoNull said, your seat-click element is of height 0.
You can either set the height of that element or write the click event handler on the seat element instead using:
$('.seat').on('click', function () {
console.log('Hello');
});
The div you're using are not displayed in the browser as <div id="2020" class="seat-click"></div> doesn't have any width or height.
I don't understand what you want for this case, but if you want to make the button where the tooltip appears able to be clicked, maybe this is right for you
<div class="seat available">
<div id="2020" class="seat-click">
<div class="tootltip-text">
<p>Name : <span id="id31">Subham<span><button>Ok</button></span></span></p>
<p>Seat No :<span id="13-tooltip-count">111</span></p>
<p>Team :<span id="id32">Abc</span></p>
</div>
</div>
</div>
Related
I am trying to simply achieve the show/hide feature on hover using the hover function of jquery.
However not able to show and hide the particular div. When I hover over the current span tag I want only the current(closest) div to hide and the closest or next possible div to be shown.
But currently since the class names are same, it is showing all the divs
FIDDLE HERE
HTML structure:
<div class="parentCat">
<div class="imageContainer">
<span class="hoverEffect">Some Image</span>
</div>
<div class="showContainer">
<span>New Image</span>
</div>
</div>
<div class="parentCat">
<div class="imageContainer">
<span class="hoverEffect">Some Image</span>
</div>
<div class="showContainer">
<span>New Image</span>
</div>
</div>
If you shift the event to the parent element, everything becomes simpler:
$('.ca').hover(function () {
$('.imageContainer', this).hide();
$('.showContainer', this).show();
}, function () {
$('.imageContainer', this).show();
$('.showContainer', this).hide();
});
Updaated working example.
If you want this effect, you need to alter your code. The div which has the hover event can't be one that you are hiding. It is also good practice to nest the related divs INSIDE of a parent div. I believe this is what you are looking for.
HTML
<div class="ca hoverEffect" style="height:40%">
<div class="imageContainer">
<span>Some Image</span>
</div>
<div class="showContainer">
<span>New Image</span>
</div>
</div>
JS
$('.hoverEffect').hover(function () {
$(this).find('.imageContainer').hide();
$(this).find('.showContainer').show();
}, function () {
$(this).find('.imageContainer').show();
$(this).find('.showContainer').hide();
});
Working jsfiddle
How do I handle this div using Selenium?
<div onclick="Hover_Menu();Toggle_LevelToolMenu(this,event);"
class="edittop edit-one"></div>
I want to click on this and work with the menu that will be displayed. I believe I will be able to handle the menu that is display, however, I am not able to click on this div.
I tried using
driver.findElement(By.xpath("xpath")).click();
Thought I would use JavascriptExecutor but getElementbyId will not work since this is div and there is no ID associated
Example:
<div style="height:25px; width:55px;">
<div onmouseover="Hover_ToolBarMenu();" class="edit_box">
<div onclick="return Click_ToolBarMenu('Edit',1019, 9189707,event, this)" class="editopt edit">
Edit
</div>
<div onclick="Hover_LivesMenu();Toggle_ToolBarMenu(this,event);" class="editopt edit-dot dot"></div>
</div>
<div class="clr"></div>
<div style="display:none; position:relative;" class="qm_ques_level_menu">
<div onmouseover="Hover_LivesMenu();" onclick="return Click_ToolBarMenu('Delete',1019, 9189707,event, this)" class="menu_buttons img_ico del">
Delete
</div>
<div onmouseover="Hover_LivesMenu();" onclick="return Click_ToolBarMenu('Copy',1019, 9189707,event, this)" class="menu_buttons img_ico copy accor">
Copy <span class="arrowIcon">?</span>
</div>
<div onmouseover="Hover_LivesMenu();" onclick="return Click_ToolBarMenu('Move',1019, 9189707,event, this)" class="menu_buttons img_ico move accor">
Move <span class="arrowIcon">?</span>
</div>
<div onclick="return Click_ToolBarMenu('Deposit2QB',1019, 9189707,event, this)" class="menu_buttons img_ico qb">
Deposit to Bank
</div>
</div>
<div></div>
</div>
http://selenium-python.readthedocs.org/en/latest/locating-elements.html
can you not use CLASS_NAME
driver.find_elements(By.CLASS_NAME, 'edit-one')
or
driver.find_element_by_class_name('edit-one')
Find and click an item from 'onclick' partial value
How about something like this?
driver.find_element_by_css_selector("div[onclick*='Hover_Menu']")
Selenium: How to select nth button using the same class name
How about this one (would required the div to be in a static position)
var nth = 2;
var divs = driver.findElements(By.className("edit-one"));
var div = divs.get(nth);
div.click();
I was able to figure this out. I used jQuery for invoking the onclick function in this div
Below is the jQuery I used
var event = document.createEvent('Event');$('.editopt.edit-dot').get(0).onclick(event)
Thanks everyone who posted and helped me on this.
What is the proper way to re-apply jquery to objects which are cloned??
I have an example I rigged up in jsfiddle here: http://jsfiddle.net/49o6arLu/16/
<div class="hidden element-holder">
<div class="element">
<div class="button">Button</div>
<div class="green-square"></div>
</div>
</div>
<div class="element">
<div class="button">Button</div>
<div class="green-square"></div>
</div>
<div class="clear"></div>
<div class="add-element">Add Element</div>
$('div.button').click(function(event) {
if($(this).parent().children('.green-square').is(':visible')) {
$(this).parent().children('.green-square').hide();
}else{
$(this).parent().children('.green-square').show();
}
});
$('div.add-element').click(function(event) {
$('div.element-holder').children('div').clone().insertAfter($('div.element-holder'));
});
As you can see, the initial displayed box and button work just fine. However, When you add another element the new element button does not work anymore.
I understand why I have this problem, however I don't know the proper way I should go about re-applying the Jquery to the new elements which are cloned.
Can someone provide a solution to the jquery and provide some explanation as to what you did?
Thanks!
You can save the need to re-apply the handler to all the appended elements by having a single delegated click handler on a common parent element.
First of all amend your HTML to include the container, in this case #element-container:
<div class="hidden element-holder">
<div class="element">
<div class="button">Button</div>
<div class="green-square"></div>
</div>
</div>
<div id="element-container">
<div class="element">
<div class="button">Button</div>
<div class="green-square"></div>
</div>
<div class="clear"></div>
</div>
<div class="add-element">Add Element</div>
Then you can amend the Add Element button to append to that container:
$('div.add-element').click(function (event) {
$('div.element-holder').children('div').clone().appendTo('#element-container');
});
Finally you can add the delegated event handler to the new #element-container. Note that I also shortened the logic using toggle() and siblings():
$('#element-container').on('click', 'div.button', function (event) {
$(this).siblings('.green-square').toggle()
});
Example fiddle
In order to copy event handlers you should send true in the clone method:
$('div.add-element').click(function(event) {
$('div.element-holder').children('div').clone(true).insertAfter($('div.element-holder'));});
I have 3 nested divs..
<div onclick="highlight(this)">1
<div onclick="highlight(this)">2
<div onclick="highlight(this)">3
</div>
</div>
</div>
To stop event-bubbling, I want add a syntax to the divs - stopPropagation().
I've tried (for first div only here)
document.querySelectorAll("div")[0].setAttribute("onclick", "event.stopPropagation()");
But it's not working. What is the solution/alternative to this..??
I want the divs to be like..
<div onclick="highlight(this) event.stopPropagation()">1
As you need to stop propagation of event, it seems to make sense that the corresponding action is attached to event itself. Here's one possible way of using it:
HTML
<div id="outer" onclick="highlight(event, this)">
<div id="middle" onclick="highlight(event, this)">
<div id="inner" onclick="highlight(event, this)">
</div>
</div>
</div>
JS
function highlight(event, target) {
event.stopPropagation();
console.log( target.id + ' is clicked' );
}
Demo.
At runtime I have a loop that creates a number of divs with the same class depending on the number in the database.
<div class="show">....</div>
<div class="show">....</div>
<div class="show">....</div>
I want to display this div using the slideToggle() function with jQuery. For each of these I have a separate hyperlink which when clicked should display the div. Also there are a number of tags in between the hyperlink and the div that I want to toggle.
<div>
<div>
View
</div>
<br />
</div>
<div>
<div class="clear"></div>
</div>
<div class="show">....</div>
<div>
<div>
View
</div>
<br />
</div>
<div>
<div class="clear"></div>
</div>
<div class="show">....</div>
<div>
<div>
View
</div>
<br />
</div>
<div>
<div class="clear"></div>
</div>
<div class="show">....</div>
$(function () {
$(".display").click(function(){
$(".show").slideToggle();
return false;
});
});
Naturally when this is called each div layer is toggled, regardless of which hyperlink is clicked. I want to just toggle the div closest to the given hyperlink.
Thanks in advance.
Find the <div> relatively by going from this using tree traversal functions, like this:
$(function () {
$(".display").click(function () {
$(this).next().slideToggle();
return false;
});
});
In this case since it's the next sibling element we care about, use .next(), if the structure is different from the question, you'll need to adjust it accordingly, go get from the <a> you clicked on (this) to the <div> you want to toggle.
$(function () {
$(".display").click(function () {
$(this).next.(".show").slideToggle();
return false;
});
Or while you loop through creating your divs, can you add (for example) a rel value that's incremented by one every time? Giving you something like...
View
<div class="show" rel="1">....</div>
View
<div class="show" rel="2">....</div>
View
<div class="show" rel="3">....</div>
This would then link the two divs so that you could get the rel value of your clicked element and use that to identify the shown / hidden div.
<script type="text/javascript">
$(function () {
$(".display").click(function () {
var element_id = $(this).attr('rel');
$(".show").attr('rel', element_id).slideToggle();
return false;
});
});