KellysOnTop23 KellysOnTop23 - 6 months ago 27
HTML Question

object created inside jQuery 'click' persists even though a new one is created

very new to JQuery so my code is probably not the best approach, so tips there would be nice...

But the problem is that the

created inside the click function doesn't ever seem to be dismissed. If the function runs through and I console.log the object i get both the new one created and all the previous ones that were created as well. I tried putting the object outside the function but that doesn't work. I'm sure this is a quick fix. Thank you for any help.

P.S. the div's are created dynamically in javascript based on incoming data

$(document).on('click', '.profileDiv', function(){
var outer = this;
$('#headerModal').text('Would like to request a session with ' + $(outer).find('#pro_first_name').text());
$(document).on('click', '#modalRequest', function(){
var reqObj = {};
reqObj = {
pro_id : $(outer).attr('id'),


You shouldn't really bind and event inside another event callback, and as you are using event delegation you don't really need to. What you are trying to do is pass data from the callback of one event to another.

You can achieve this through using global variables that all functions have access to, however this is an anti pattern as it can change at anytime by any piece of the code.

jQuery gives you a better way however to attach metadata to elements so you can easily transfer or store the state using it's much better than resorting to global variables.

$.fn.modal = function(){}

$(document).on('click', '.profileDiv', function() {
  var outer = this;
    .data('reqObj', {
      pro_id : $(outer).attr('id'),
    'Would like to request a session with ' +            

$(document).on('click', '#modalRequest', function(){
#modalRequest {
  width: 200px;
  height: 200px;
  background: #bada55;
  float: left;
  margin: .5em;
<script src=""></script>
<div class="profileDiv" id="myModal">profileDiv</div>
<div id="modalRequest">modalRequest</div>