开发者问题收集

在我的 html 中找不到按钮

2018-03-07
1023
javascript jquery html

我正在用 javascript 练习 MVC，并尝试将控制器中的事件处理程序附加到按钮。首先，我创建视图，并在其构造函数中加载外部 HTML。然后，在控制器构造函数中，我尝试执行 find("#myButton") 以找到我的按钮，然后将事件侦听器附加到它。以下是我的尝试：

index.html： 

<div id="welcome"></div>

js/app.js： 

var welcome = $("#welcome");
var welcomeView = new WelcomeView(welcome, model);
var welcomeController = new WelcomeController(welcome, model, generalController);

js/view/welcomeView.js： 

var WelcomeView = function(container, model){
    var container = container;
    var model = model;

    container.load("welcome.html");

    this.show = function(){
        container.style.display = "block";
    }

    this.hide = function(){
        container.style.display = "none";
    }
}

welcome.html： 

<button type="button" class="btn btn-default" id="myButton">Create new dinner</button>

js/controllers/welcomeController.js： 

var WelcomeController = function(container, model, generalController){
    var container = container;
    var model = model;

    var createButton = container.find("#myButton");

    createButton.click( function() {
        alert("entered");
        generalController.showScreen("DISHSEARCH");
    } );
}

单击按钮时，什么也没有发生。当我尝试在控制器中不使用 jQuery 时： 

createButton[0].onclick = function(){
    alert("hello");
};

我收到错误： 

welcomeController.js:7 Uncaught TypeError: Cannot set property 'onclick' of undefined
    at new WelcomeController (welcomeController.js:7)
    at HTMLDocument.<anonymous> (app.js:30)
    at fire (jquery.js:3119)
    at Object.fireWith [as resolveWith] (jquery.js:3231)
    at Function.ready (jquery.js:3443)
    at HTMLDocument.completed (jquery.js:3474)

因此，查找按钮元素似乎存在一些问题，但我无法弄清楚！这里出了什么问题？

2个回答

@skobaljic 有正确的解决方案。使用 .on() 解决了该问题：

js/controllers/welcomeController.js： 

container.on('click', "#myButton", function() {
        alert("Success!");
        generalController.showScreen("DISHSEARCH");
    })
Sahand
2018-03-07

使用您的welcome.html和index.html中的welcome div，这工作得很好： （加载函数有一个回调来通知您加载已完成）。正如其他人提到的；这是一个异步任务。 

$(function() {
    $("#welcome").load("welcome.html", function() {
        $('#myButton',this).on("click",function() {
            alert("clicked");
        });
    });
});

也可以同步加载， $.ajax({async:false,... 或这个 vanilla : 

var request = new XMLHttpRequest();
request.open('GET', 'welcome.html', false);  // `false` makes the request synchronous
request.send(null);
if (request.status === 200) {
  console.log(request.responseText);
}
nullqube
2018-03-07