【发布时间】：2015-05-02 04:02:49
【问题描述】：
我在主干应用程序中有一个 jQuery UI 对话框。我完全按照post 中的建议进行操作，但是在单击对话框中的“登录”按钮时，我仍然无法捕获单击事件。我在 firebug 中不断收到此错误（在 jquery.js 中）：
TypeError: click is undefined
click.apply( that.element[ 0 ], arguments );
这是我的 index.html：
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="">
<title>Giip</title>
<link rel="stylesheet" href="css/jquery_ui.css">
<link rel="stylesheet" href="css/jquery_ui_theme.css">
<link rel="stylesheet" href="css/style.css">
<script data-main="js/others/app" src="js/libs/requires/require.js"></script>
</head>
<body>
</body>
</html>
这是我的 app.js：
//Setup app
require.config({
paths: {
jquery: "../libs/jqueries/jquery",
underscore: "../libs/underscores/underscore",
backbone: "../libs/backbones/backbone",
jqueryui: "../libs/jquery_uis/jquery_ui",
text: "../libs/requires/plugins/text",
templates: "../../templates"
},
urlArgs: "bust=" + (new Date()).getTime()
});
//Kick off app
require(["../views/giip/login_view"], function(LoginView) {
loginView = new LoginView();
loginView.render();
});
这是我的 login_new.js：
define([
"jquery",
"underscore",
"backbone",
"jqueryui",
"text!templates/giip/login.html"
], function($, _, Backbone, jQueryUi, loginTemplate) {
var LoginView = Backbone.View.extend({
login: function() {
console.log("logging in...");
},
events: {
"click .ui-button": "login"
},
render: function () {
$(loginTemplate).dialog({
title:"Login",
autoOpen: true,
closeOnEscape: false,
resizable: false,
draggable: true,
dialogClass: "no-close",
modal: true,
buttons: [{ text: "Login" }]
});
this.el = $("#dialogContainer");
this.delegateEvents(this.events);
return this;
},
initialize: function () {
_.bindAll(this, "render");
}
});
return LoginView;
});
这是我的登录模板：
<div id="dialogContainer" title="Create new user">
<form>
<fieldset>
<label for="name">Username</label>
<input type="text" name="username" id="username" value="phamtranquocviet" class="text ui-widget-content ui-corner-all">
<div class='clear-both vertical-spacer'/>
<label for="password">Password</label>
<input type="password" name="password" id="password" value="xxxxxxx" class="text ui-widget-content ui-corner-all">
</fieldset>
</form>
</div>
当我在“渲染”函数中添加一个点击事件时，点击事件被捕获，我可以在 firebug 中看到“button clicked..”调试消息。但这不会是主干方式。请帮我找出我做错了什么？谢谢。
render: function () {
$(loginTemplate).dialog({
title:"Login",
autoOpen: true,
closeOnEscape: false,
resizable: false,
draggable: true,
dialogClass: "no-close",
modal: true,
buttons: [{ text: "Login" }]
click: function() {
console.log("button clicked...");
}
});
this.el = $("#dialogContainer");
this.delegateEvents(this.events);
return this;
},
【问题讨论】：