CODEWITHSUNDEEP
javascriptjqueryhtml
Dmitrij Holkin
Dmitrij Holkin

Reputation: 2055

Javascript access div

I have a start script

<script>
$(function() {
    $('.full-info').on('click',loadFull);   
    function loadFull(e) {  
        e.preventDefault();
        $.get($(this).attr('href'), function(data) {
        $('#pop-up').html(data).show();
        });
    };
});
</script>
<div class="Generalwrapper" >
    <div class="wrapper pop-up" id="pop-up" style="display:none;" ></div>
</div>

After Get response i got data in Html format

<a href='#' class='close pop-up'></a>

So how to hide #pop-up div on .close pop-up click ?

As from start script .close pop-up is not accessible and also from output data #pop-up div is not accessible

Upvotes: 0

Views: 88

Answers (5)

Mr. Smith
Mr. Smith

Reputation: 5558

The event handler for the click event can only be assigned after this line of code:

$('#pop_up').html(data).show();

The HTML is not loaded into the DOM until this line is executed.

Upvotes: 1

AddWeb Solution Pvt Ltd
AddWeb Solution Pvt Ltd

Reputation: 21681

You can use below code:

$(".close").click(function(){
    e.preventDefault(); 
    $("#pop-up").hide();
});

Let me know if you face any query/concern regarding this.

Thanks!

Upvotes: 0

Nishit Maheta
Nishit Maheta

Reputation: 6031

use below code . add below code in your $(function() { });

Learn about event delegation

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

 $(function() {

   $(document).on('click','.close',function(e){
     e.preventDefault();
     $('#pop-up').hide();
   });

   $('.full-info').on('click',loadFull);   
    function loadFull(e) {  
      e.preventDefault();
      $.get($(this).attr('href'), function(data) {
      $('#pop-up').html(data).show();
     });
    };

 });

Second Option.( with nearest static parent )

 $('.Generalwrapper').on('click','.close',function(e){
     e.preventDefault();
    $('#pop-up').hide();
 });

Upvotes: 0

Vijay Mistry
Vijay Mistry

Reputation: 157

$('#pop-up').on("popupbeforeposition", function(event, ui) {

    // bind events like below
    //$('.close.pop-up','#pop-up').off('click');
    //$('#pop-up').on('click', '.close.pop-up', function(){
    //  e.preventDefault();
    //  $('#pop-up').hide();
    //});
}

Upvotes: 1

Satpal
Satpal

Reputation: 133453

Use Event Delegation using .on() delegated-events approach and bind event as

$('#pop-up').on('click', '.close.pop-up', function(){
    e.preventDefault();
    $('#pop-up').hide();
});

The delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, we can use delegated events to bind the click event to dynamically created elements and also to avoid the need to frequently attach and remove event handlers.

Upvotes: 1

Related Questions