Блог

Главная - Вопросы по программированию - объект, созданный внутри jQuery ‘click’, сохраняется, даже если создан новый

объект, созданный внутри jQuery ‘click’, сохраняется, даже если создан новый

#javascript #jquery #html #scope #this

#javascript #jquery ( jquery ) #HTML #область применения #это

Вопрос:

очень новичок в jQuery, так что мой код, вероятно, не самый лучший подход, поэтому советы там были бы неплохими…

Но проблема в том, что reqObj созданная внутри функции click функция, похоже, никогда не отклоняется. Если функция выполняется, и я утешаю.регистрируйте объект, который я получаю, как новый созданный, так и все предыдущие, которые также были созданы. Я попытался поместить объект вне функции, но это не сработало. Я уверен, что это можно быстро исправить. Спасибо вам за любую помощь.

PS 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);
    });
});

Комментарии:

1. Вложенные события — плохая практика, особенно если вы каким-либо образом не привязываете вложенный объект. Здесь каждый раз, когда вы нажимаете .profileDiv , вы привязываете новое событие щелчка #modalRequest , не отменяя привязку к предыдущему. И в любом случае, нет абсолютно никаких причин, по которым вы привязываете делегированное событие к уровню. document Что будет работать для вас: $(document).off('click','#modalRequest').on('click', '#modalRequest', function(){...}); . Но, как уже было сказано, это просто плохая практика

2. $(outer).attr('id') === outer.id

Ответ №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>

Комментарии:

1. отлично работает, и я чувствую, что это уже лучше, чем глобальный, как вы сказали. Я понимаю это достаточно хорошо, но когда я регистрирую объект, я получаю введенные данные, но также bs.modal: c и похоже, что это просто ссылка на то, откуда пришли данные. Можно ли просто игнорировать это и двигаться дальше? (добавлен a . перед modal )

2. Это работает для меня в stacksnippet, вы уверены, что нет другой ошибки?

3. И очень быстро, если вы все еще получаете это! внутри модального есть input поле, которое я пытаюсь добавить к объекту в data. Выполнение этого при data.fn создании не работает, когда модальный объект правильно закрыт, но когда вы снова открываете его в любом другом div, вы видите там сообщение, которое сохраняется и передается в объект data.fn . Почему это так?

4. О, код работает нормально, просто когда я его регистрирую, я также получаю это то, что я получаю Object {pro_id: "7", bs.modal: c} , и этот последний вставленный объект выглядит так, как будто он просто детализирует, откуда data.fn он взялся. просто интересно, нормально ли это и нормально ли просто игнорировать?

5. Модальный плагин, вероятно, использует тот же метод для хранения некоторых данных о своем состоянии. Вы можете просто проигнорировать его и, вероятно, не следует его изменять, поскольку это может вызвать проблему в модальном плагине.

Метки: , , ,