CODEWITHSUNDEEP
jqueryhtmlcss
Rohan Rao
Rohan Rao

Reputation: 2613

Selecting inner most element and disable click event on it in jquery

So I have this hierarchy of iframe,

<iframe>
<html>
<head><head>
<body>
  <div id="appOuterContainer">
  <form>
  <div id="appContainer">
    <div id="app">
      <div id="statusBarContainer"> <!-- status bar starts here-->
        <div id ="myStatusBar">
          <span id="one"></span>
          <span id="two">
            <a href="#">One</a>
            <a href="#" aria-popup="true">Two</a>
          </span>
        </div>
      </div> <!-- status bar ends here-->
    </div>
   </div>
  </form>
  </div>
</body>
</html>
</iframe>

As you can see the inner most span elements have two elements. What I want is, I want to disable the click event only on that second anchor tag.

I have tried this:

var iframes = document.getElementsByTagName("span");
var obj = $(iframes).find(aria-popup="true");
$(obj).css('pointer-events','none');

But this doesn't work.

EDIT: The Html of an iframe is coming from an external source. Is it anyhow possible to achieve this?

Can anyone please help me sort out this? How can I select the inner most element of span and disable pointer event on it?

Upvotes: 0

Views: 53

Answers (1)

Kunal Raut
Kunal Raut

Reputation: 2584

You can disable it using jQuery as

$('a:eq(1)').click(function(event){
  event.preventDefault();
});

This prevents the click function to occur for the respective achor tag.

Upvotes: 1

Related Questions