I can't hide a div on click event with jquery

Question

I want hide the whole div element when click the iframe.

$("html").on('mousemove', function(e) {
   var x = e.pageX -12;
   var y = e.pageY - 20;
   $("#test1").css({'top': y, 'left': x});
   });


$(function(){
                     $("#test1").click(function(){
                             $("#test2").hide();
                       });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test1" style="width:150px;height:150px;position:relative;">
    <iframe id="test2" src="http://www.w3schools.com" style=" position:absolute;" ></iframe>
</div>

i have used the events: click, on, mouseup and anyone seems to works, i cant figured why

http://jsfiddle.net/z6tco5rg/

This is `click` event using an iframe, which can change some things. Have a look at [this answer](http://stackoverflow.com/questions/6452502/adding-click-event-handler-to-iframe) dealing with how to add an `onclick` event to an iframe. — Spencer Wieczorek, Jul 15 '15 at 20:39

score 1 · Answer 1 · answered Jul 15 '15 at 20:39

In your fiddle it was not possible to click on the div. I just added some padding to the div.

<div id="test1" style="width:150px;height:150px;position:relative; padding:20px">
<iframe id="test2" src="http://www.w3schools.com" style=" position:absolute;"></iframe>
</div>

Updated fiddle

$("html").on('mousemove', function (e) {
   var x = e.pageX - 12;
   var y = e.pageY - 20;
   $("#test1").css({
       'top': y,
       'left': x
    });
});



$(function () {
    $("#test1").click(function () {
        $("#test2").hide();
    });
});

If I understood your question correctly

micahblu · Accepted Answer · 2015-07-15T21:21:25.920

You would have to place the click event handler code within the iframe's scope, so it would have to be a script within the iframe to handle the click event.

The reason for this is due to your dragging code which keeps the mouse within the scope of the iframe, so the click event occurs within the iframe not within the parent.

The only way I can think to accomplish this would be to add another "target" div that will lay on top of the iframe element. Then to apply the click event to the target element. This is accomplished with absolute positioning and z-index.

Unfortunately, you can't have your cake and eat it too :) While this accomplishes the goal, it comes at a price; the iframe will no longer be able to accept click events since the target overlay will be, essentially blocking the iframe from mouse events.

HTML

<div id="test1" style="width:150px;height:150px;position:relative;">
    <iframe id="test2" src="http://www.w3schools.com" style=" position:absolute; top: 0px; left: 0px;" ></iframe>
    <div id="target" style="width:304px;height:154px;position:absolute; top: 0px; left: 0px; z-index: 2; background: transparent"></div>
</div>

JS

$("html").on('mousemove', function(e) {
   var x = e.pageX -12;
   var y = e.pageY - 20;
   $("#test1").css({'top': y, 'left': x});
});


$(function(){
  $("#target").click(function(){
    $("#test2").hide();
  });
});

Here's an updated jsfiddle: http://jsfiddle.net/z6tco5rg/15/

Todd Austin · Answer 3 · 2015-07-15T22:29:39.063

If you don't need to scroll the iframe you can just position:absolute a transparent png over the iframe.

<div id="test1" style="width:150px;height:150px;position:relative;">
    <img src="http://toddaustin.com/transparent.png" />
<iframe id="test2" src="http://www.w3schools.com" ></iframe>

#test1 img {
    position:absolute; 
    top:0;
    left:0;
    width:304px;
    height:150px
}

$("html").on('mousemove', function(e) {
  var x = e.pageX -12;
  var y = e.pageY - 20;
  $("#test1").css({'top': y, 'left': x});
});

$(function(){
   $("#test1 img").click(function(){
     $("#test2").hide();
   });
});

http://jsfiddle.net/aqxpo0qn/

I can't hide a div on click event with jquery

3 Answers3