即使创建了一个新对象，在 jQuery 'click' 中创建的对象仍然存在

Question

对 JQuery 来说非常新，所以我的代码可能不是最好的方法，所以提示会很好......

但问题在于，在 click 函数中创建的 reqObj 似乎从未被解除。如果函数通过并且我 console.log 对象我得到了新创建的对象和所有以前创建的对象。我尝试将对象放在函数之外，但这不起作用。我确信这是一个快速修复。感谢您的帮助。

附： div 是基于传入数据在 javascript 中动态创建的

$(document).on('click', '.profileDiv', function(){
    var outer = this;
    $("#myModal").modal('toggle');
    $('#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'),
      }
      console.log(reqObj);
    });
});

Answer 1

您不应该真正在另一个事件回调中绑定和事件，并且当您使用事件委托时，您实际上并不需要这样做。您要做的是将数据从一个事件的回调传递到另一个事件。

您可以通过使用所有函数都可以访问的全局变量来实现这一点，但是这是一种反模式，因为它可以随时通过任何代码进行更改。

jQuery 为您提供了一种更好的方法，可以将元数据附加到元素，这样您就可以使用 jQuery.fn.data 轻松传输或存储状态，这比使用全局变量要好得多。

$.fn.modal = function(){}

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

$(document).on('click', '#modalRequest', function(){
  console.log($("#myModal").data());
});

$(document).on('keyup', '#messageReq', function(e){
  var $modal = $('#myModal')
  // get the data
  var data = $modal.data()
  // assign the text field value to the data
  data.msg = this.value
  // reset the data on the modal element
  $modal.data(data)
})

.profileDiv,
#modalRequest {
  width: 200px;
  height: 200px;
  background: #bada55;
  float: left;
  margin: .5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="profileDiv" id="myModal">profileDiv</div>
<div id="modalRequest">
  modalRequest
  <input id="messageReq" 
    type="text" 
    name="messageRequest" 
    placeholder="Present yourself" />
</div>