CODEWITHSUNDEEP
jquery
port5432
port5432

Reputation: 6371

jQuery code not firing

I have a jQuery pop-up dialog, and at the top there is a close link. For some reason the code is never called here: I've watched in the debugger.

I assume it is something simple, as the open code works fine.

The javascript code is:

$(document).ready(function(){
  $('#dialogOpen').click(function() {
    console.log("link clicked");
    openDialog('#dialog');
  });

$('#dialog').find('.ok')
  .on('click', function() {
    console.log("ok clicked");
    closeDialog(this);
  })
});

function openDialog(selector) {
  $(selector)
    .clone()
    .appendTo('#overlay')
    .show()
    .parent()
    .fadeIn('fast');
  }

function closeDialog(selector) {
  $(selector)
    .parents('#overlay')
    .fadeOut('fast', function() {
       $(this)
         .find('.dialog')
         .remove();
       });
}

The html snippet:

  <div id="dialog" class="dialog">
     <a href="#" class="ok">Close Dialog</a>
  <div>

The full code is here: https://gist.github.com/sfcarroll/4739040

Upvotes: 0

Views: 59

Answers (6)

red-X
red-X

Reputation: 5128

Since everyone else is applying the event on the selector instead of the object I thought I'd go about it differently.

The problem is that you add the event to the original html, but when you clone the html you don't copy the event's with it. add a true as argument and you should be set:

function openDialog(selector) {
  $(selector)
    .clone(true)
    .appendTo('#overlay')
    .show()
    .parent()
    .fadeIn('fast');
  }

see the docs

Upvotes: 2

Gerald Schneider
Gerald Schneider

Reputation: 17797

In your openDialog function you are cloning the dialog and thus creating a new instance of it. You would either have to bind to the click event afterwards or use $('#dialog .ok').live('click', data, handler); to have it bound to new DOM elements.

Upvotes: 1

Clement Herreman
Clement Herreman

Reputation: 10536

This code

$('#dialog').find('.ok')
  .on('click', function() {
    console.log("ok clicked");
    closeDialog(this);
  })
});

bind event to existing html nodes. It is called before your new #dialog are created, thus these new #dialog doesn't have a callback called on the click on their .ok. The reason is that .clone doesn't clone the event bound on the cloned element.

Use a delegate handle, like this :

$(document).on('#dialog .ok', 'click', function () {
  // Your click handler here
});

Upvotes: 1

Pratik Bhatt
Pratik Bhatt

Reputation: 911

$(document).ready(function(){
  $('#dialogOpen').click(function() {
    console.log("link clicked");
    openDialog('#dialog');
  });


});

function openDialog(selector) {
  $(selector)
    .clone()
    .appendTo('#overlay')
    .show()
    .parent()
    .fadeIn('fast');

    $('#dialog').find('.ok')
  .on('click', function() {
    console.log("ok clicked");
    closeDialog(this);
  });

}

function closeDialog(selector) {
  $(selector)
  .parents('#overlay')
  .fadeOut('fast', function() {
    $(this)
      .find('.dialog')
      .remove();
  });
}

DEMO

Intially you had applied .dialog class to #dialog div, which contains display:none CSS , so intially DOM will not have that div on which you can bind event, so it was not firing.

Upvotes: 1

Fraser
Fraser

Reputation: 14244

You are setting your .on on the button itsself. It should be on a parent so it can catch the click it as it bubbles up. Try:

$(document).on('click', '#dialog .ok', function() {
    console.log("ok clicked");
    closeDialog(this);
  })
});

Upvotes: 1

soju
soju

Reputation: 25312

You should try :

$('body').on('click', '.dialog .ok', function() {
    console.log("ok clicked");
    closeDialog(this);
  })
});

Upvotes: 1

Related Questions