Question

我有一个输入字段，我正在尝试使用加号按钮和减号按钮来更改值。我们的想法是sideController应该为onclick事件分配一个函数，该函数将增加或减少模型中input元素中的数字。然后，模型将调用其观察者对象的update函数，这将导致数字在input元素的屏幕上更新。

但是，现在，什么也没发生。我甚至没有收到错误消息。在我看来，onclick事件没有正确分配，因为如果我在alert函数的sideController文件中放置一个plusButton，它不会引起警告我点击时的屏幕。

我做错了什么？

<!DOCTYPE html>
<html lang="en">
  <body>
  <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 sidebar collapse" id="sidebar">
      <div class="noofpeople">
        <div class="row noofpeople-wrapper">
          <input id="numberOfGuests" type="number" class="form-control">
          <button type="button" id="plusButton"></button>
          <button type="button" id="minusButton"></button>
        </div>
      </div>
  </div>

  <!-- jQuery -->
      <script src="https://code.jquery.com/jquery.js"></script>

  <!-- The application JavaScript code -->  
      <script src="js/app.js"></script>
      <script src="js/model/dinnerModel.js"></script>
      <script src="js/view/sidebarView.js"></script>
      <script src="js/controllers/sidebarController.js"></script>
  </body>
</html>

sidebarController.js：

var SideController = function(container, model){
    var plusButton = container.find("#plusButton");
    var minusButton = container.find("#minusButton");
    plusButton.onclick = function(){
        alert("hello");
        model.incrNumberOfGuests();
    };
    minusButton.onclick = function(){
        model.decrNumberOfGuests();
    };
};

app.js

$(function() {
    //We instantiate our model
    var model = new DinnerModel();
    // And create the instance of ExampleView
    var sidebar = $("#sidebar");
    if(sidebar[0] != undefined){
        var sidebarView = new SideBarView(sidebar, model); 
        var sidebarController = new SideController(sidebar, model);
    }

    var dishreel = $("#dishreel");
    if(dishreel[0] != undefined){
        var dishReelView = new DishReelView(dishreel, model);   
    }
});

sidebarView.js：

var SideBarView = function(container, model){
    var numberOfGuests = container.find("#numberOfGuests");

    numberOfGuests.val(model.getNumberOfGuests);

    this.update = function(){
        numberOfGuests.val(model.getNumberOfGuests());
    }
}

dinnerModel.js

var DinnerModel = function() {

    //TODO Lab 1 implement the data structure that will hold number of guest
    // and selected dishes for the dinner menu

    var numberOfGuests = 0;

    var selectedDishes = [];

    var observers = []; 

    this.notifyObservers = function(){
        for(var i = 0; i<observers.length; i++){
            observers[i].update();
        }
    }
    this.incrNumberOfGuests = function(){
        numberOfGuests++;
        this.notifyObservers();
    }
    this.decrNumberOfGuests = function(){
        numberOfGuests--;
        this.notifyObservers();
    }

    this.getNumberOfGuests = function() {
        return numberOfGuests;
    }
}

更新：

如果我在app.js中分配事件处理函数，则在单击按钮时输入该函数。为什么不在SideController？

Answer 1

plusButton是一个包装DOM元素的jQuery对象。 onclick不是一个有意义的jQuery属性。你可以设置它，但jQuery不会做任何事情。

要附加单击事件处理程序，您可以直接访问DOM元素，如下所示：

// Access DOM element directly and set onclick attribute
plusButton[0].onclick = function(){};

或者你可以使用jQuery的click()或on('click')函数将事件处理程序附加到jQuery＆＃34; array＆＃34;中的所有DOM元素。（0或更多）像这样：

// Use jQuery's event handling functions
plusButton.click(function(){});
// or
plusButton.on('click', function(){});

在控制器中分配的onclick处理程序未执行

1 个答案: