Both span elements inside div not clickable

make div clickable javascript
clickable div bootstrap
make div clickable jquery
make div not clickable css
make div not clickable jquery
div onclick href target
a href not working inside div
pointer-events css

I have two span elements inside a div -

<div class="search-input">
  <div class="input-categories">
    <span class="comm-input-value">Any unit type </span>
    <span class="icon fa fa-angle-down"></span>
  </div>
</div>

My jquery code is -

$('.input-categories').on('click',function(){
        if ($(this).parent().hasClass("open")){
             $(this).parent().removeClass("open");    

        }else {
            $('.input-categories').parent().removeClass('open');
            $(this).parent().addClass('open');

        }
});

Issue: Only the span with the icon is clickable. I want both the spans to be clickable and not just the icon span. How can I achieve this? Please help

An elegant way to do it is by using toggleClass method of jquery.

<div class="search-input">
  <div class="input-categories">
    <span class="comm-input-value">Any unit type </span>
    <span class="icon fa fa-angle-down"></span>
  </div>
</div>
<script>
$('.input-categories span').on('click',function(){
        $(this).parent().toggleClass("open");    
});
</script>

CSS – Elements covered by a container div not clickable , I cannot disable visibility (I need both images) so I use the first solution. Thank you. Leave a Reply Cancel reply. Your email address will not be  Sadly a screenshot isn't a way to present a minimized HTML example. The above doesn't help at all because the element contains way more sub elements, and then it's also not clear which CSS styles/properties are assigned to them. One question through Is any element below this div a block-level element?

$('.input-categories').on('click', function() {
  $(this).parent().toggleClass('open');
});
@import url("https://use.fontawesome.com/releases/v5.1.0/css/all.css");
@import url("https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css");
.input-categories {
  cursor: pointer;
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>

<div class="search-input">
  <div class="input-categories">
    <span class="comm-input-value">Any unit type </span>
    <span class="icon fa fa-angle-down"></span>
  </div>
</div>

Be Slightly Careful with Sub Elements of Clickable Things, How do we know if that click happened on the button or not? The button element; The svg element; The use element If we make sure nothing within the button has pointer-events, clicks inside the button </svg> </span> </button> any actions on that event anymore, to reduce memory usage, or both. CSS – Elements covered by a container div not clickable. A link was covered by a div for some reason but although the link is visible, it is not click-able (partially). Hover is not working either. This is because the container div covering the link accepts all the clicks and over event, not the link under it.

put classes on your span elements (if those are the only spans which you want to get clicked) and bind click to those spans like this:

<div class="search-input">
  <div class="input-categories">

    <span class="comm-input-value input-span">Any unit type </span>
    <span class="icon fa fa-angle-down input-span"></span>

  </div>
</div>

and in Jquery no need to put the if else statement of removing open use toggle class

$('.input-span').on('click',function(){

             $(this).parent().toggleClass("open");    

});

Make Entire Div Clickable, Looks for a link inside div with class of “myBox”. Redirects to that links value when anywhere in div is clicked. myBox class clickable, so if there's no link in one, it'll 404, is that the problem? If you were to go that route make sure all the elements inside the “a” are inline by default (like a span or p),  In html5 the <a> element may now contain block elements, meaning you can wrap it around the whole "box" at a higher level within the nested elements. casbboy August 4, 2016, 9:27pm #3

Your code works well. Check it on this example:

$('.input-categories').on('click',function(){
	alert("clicked");
});
.icon{
  margin-left: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<div class="search-input">
  <div class="input-categories">
    <span class="comm-input-value">Any unit type </span>
    <span class="icon fa fa-angle-down"></span>
  </div>
</div>

<span>, The HTML span element is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to Tag omission, None, both the starting and ending tag are mandatory. Permitted  In dan’s post he said to set the div’s position to relative and then make the link’s position absolute. This means that the top:0; left:0; will be referencing the containing div not the body of the page. If the position was not set on the parent div or any other ancestor elements, then it would take up the whole page as you pointed out.

ARIA: button role, The button role should be used for clickable elements that trigger a response when For most buttons, this name will be the same as the text inside the button. Whether an element is a toggle button or not can be indicated with the Because a <span> element is used, the tabindex attribute is required to  Alex August 30, 2014, 2:19pm #4 From an HTML standpoint, if you are trying to make the entire div a clickable link, you could try putting an anchor tag inside of the div with display:block; set in the CSS along with the width and height at 100%.

There's no reason to use pointer-events for HTML elements, The pointer-events CSS property controls if and how elements can be targeted events - hover, active, click - from being applied to the element. that keyboard focus should be restricted to elements within a modal if it is active. src="icon" alt​="Icon"> </button> <span id="label">Click the icon to do stuff! HTML 4.01 specifies that a elements may only contain inline elements. A div is a block element, so it may not appear inside an a. HTML 5 states that the a element "may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links)".

Best Way to Make Entire LI/Span to be Link/Href Clickable, Here is the html <div class="span3 "> <section class="lazy-load-box a element (“flow” content) should go just inside the li elements, not just  Cannot click link inside div? Element is not clickable at point (508, 136). How to click a link / button implemented as a div or span element with WebDriver. 3.

Comments
  • i cannot replicate the problem. See here jsfiddle.net/JfGVE/3946 ( without refactoring your code which could be written better )
  • it works for me (span can be clicked)
  • Possible duplicate of Button's event doesn't work after click on button's title or button's icon
  • Did you meant that cursor is not pointer.