2

我想为我的网页中的特定文本字段指定点击事件，它的 id 值为service.

即使我通过另一个元素setElement()来查看，我仍然想在文本字段（id：service）上应用该点击事件。

查看代码：

var addService=Backbone.View.extend({
    events:{
        "click #service":"alertfunction"
    },
    alertfunction:function(event){
        alert("working");
    }
});
var addFunctionObj=new addService({el:$("div")});

html代码：

<div align="center" id="div2">
    <input type="text" id="service" style="width: 200px; height: 20px; color: white; background: green" placeHolder="Enter Service"/>
    <input type="text" id="price" style="width: 200px; height: 20px; color: white; background: green" placeHolder="Enter Price"/>
    <input type="button" id="add" align="center" style="width: 100px; height: 50px; color: white; background: green" value="AddService"/>
    <span>I am Normal Text</span>
</div>

测试用例 ：

最初，如果我单击文本字段（服务），即使您通过div查看也会收到警报。但是，如果我使用以下名称进行查看setElement，则单击事件不适用于文本字段（服务）。

view.setElement('#add')
view.setElement('input')
view.setElement('span')

再次如果您通过div or #div2查看，单击事件在文本字段（服务）上工作正常。但是如果您将上述元素传递给查看，它就不起作用。为什么？

我想要什么：如果您将任何元素传递给查看，点击事件应该在文本字段（服务）上工作。可能吗。

谢谢。

4

1 回答 1

2

您要做的不是 Backbone 的工作方式。

以下代码的作用是侦听冒泡的“this.el”子项的点击事件。

events:{
    "click #service": "alertfunction"
}

这意味着您不能将“this.el”设置为 input#add，因为该元素没有 ID 为 #service 的子元素。

作品

<div id="div1">
    <input type="text" id="service" />
</div>

var addFunctionObj=new addService({el:$("div1")});

不工作

<div id="div1">
</div>
<input type="text" id="service" />

var addFunctionObj=new addService({el:$("div1")});

第二个示例不起作用，因为#service不是this.el 的子项。只要你“传递”一个没有#service 作为子元素的元素，它就永远不会工作。

于 2013-10-23T08:08:15.947 回答