jQuery - включить форму через ID

Question

Я использую backbone.js, и у меня есть событие, прикрепленное к кнопке, которая отображает форму, прикрепленную к выбранному элементу. После отправки новой формы он заменяет текст в DOM.

Проблема в том, что следующий щелчок на исходной кнопке не запускает меню. Я не уверен, что происходит.

  events: { 
     'click .editUser': 'edit', 
     // 'click #editPerson': 'editPerson', 
     'click .deleteUser': 'remove' 
    }, 

    edit: function() { 
     menuBar = $("#editPerson"); ///this is my new input form 
     console.log(this.model); 
     var model = (this.model); 
     console.log(model); 

     $(this.el).css("background-color", function (index){ 
      return "rgba(54,42,64, .9)"; 
     }); 
     $(".contact-container").css("margin", function (index){ 
      return "0 5px 100px 0 "; 
     }) 
     $(this.el).append(menuBar); 
     console.log($(this.el)); 
     menuBar.show(); 


     $("#editPerson").on('submit', function() { 
      console.log("hoook"); 
      var name = $(".edit1").val(); 
      var address = $(".edit2").val(); 
      var telephone = $(".edit3").val(); 
      var email = $(".edit4").val(); 

      model.set({name: name}); 
      model.set({address: address}); 
      model.set({tel: telephone}); 
      model.set({email: email}); 
      // $(":button").removeAttr("disabled"); 
      return false; 
     }); 

    }, 

Answer 1

Почему вы добавляете #editPerson в $ el, если он уже находится в DOM? Что это делает, это взять узел из DOM и добавить его в ваш $ el. У этого плохой запах! В следующий раз, когда ваш взгляд будет искать этот узел, он не найдет его, если вы удалили предыдущее представление, так как оно больше не находится в DOM.

Если #editPerson просто шаблон форме, вы можете получить HTML-код и добавить его на ваш взгляд:

this.$el.append($("#editPerson").html()) 

(это $ эш эквивалентно $ (this.el) и «быстрее. 'потому что объект уже существует, когда вы создаете свой Backbone View, Backbone назначит переменную this. $ el = $ (this.el) для удобства)

Затем вы можете добавить' submit #editPerson ':' onSubmit "в хэш х событий и скопируйте код обработчика на новую функцию onSubmit в представлении. Не нужно делать привязку вручную, потому что Backbone «заметит» (на самом деле это не так, как работает, Backbone не смотрит DOM), что новый элемент добавлен в ваше представление, и событие будет работать.