javascript - 如何将委托(delegate)事件分配给特定的 Dom 元素

Question

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

即使我使用 setElement() 传递另一个元素来查看，我仍然想在 text-field(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 或 #div2 传递给查看，单击事件在文本字段(服务)上工作正常。但是如果您将上述元素传递给查看，则它不起作用。为什么？

我想要的:如果您将任何元素传递给查看，单击事件应该在文本字段(服务)上工作。有没有可能。

谢谢。

Answer 1

您尝试做的不是 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 作为子元素的元素，它就永远不会工作。