封装jquery组件,这是组件html模板,现在想对咨询按钮加个点击事件,能够在调用组件时抛事件出来 this.tpl = '<li class="text-list">\ <a class="text-list-info" target="{{target}}" href="' + (this.url ? this.url + '?guid={{guid}}' : 'javascript:;') + '">\ <p class="name" title="{{name}}">{{name}}</p>\ <ul class="info-items">\ <li class="info-item">文件文号:<span title="{{file}}">{{file}}</span></li>\ <li class="info-item">所属部门:<span title="{{depart}}">{{depart}}</span></li>\ <li class="info-item"><p class="infor-name">发布时间:<span title="{{date}}">{{date}}</span></p></li>\ <li class="info-item">政策主题:<span title="{{theme}}">{{theme}}</span></li>\ <li class="info-item">行业范围:<span title="{{trade}}">{{trade}}</span></li>\ </ul>\ </a>\ <a class="text-list-btn" href="javascript:;"><span>咨询</span></a>\ </li>'; 请提供代码
时间: 2024-01-03 20:07:47 浏览: 137
jQuery技巧之让任何组件都支持类似DOM的事件管理
可以在组件的构造函数中,给咨询按钮绑定一个点击事件,并在点击事件中触发抛出事件。代码示例如下:
```javascript
function MyComponent() {
this.tpl = '<li class="text-list">\n' +
'<a class="text-list-info" target="{{target}}" href="' +
(this.url ? this.url + '?guid={{guid}}' : 'javascript:;') + '">\n' +
'<p class="name" title="{{name}}">{{name}}</p>\n' +
'<ul class="info-items">\n' +
'<li class="info-item">文件文号:<span title="{{file}}">{{file}}</span></li>\n' +
'<li class="info-item">所属部门:<span title="{{depart}}">{{depart}}</span></li>\n' +
'<li class="info-item"><p class="infor-name">发布时间:<span title="{{date}}">{{date}}</span></p></li>\n' +
'<li class="info-item">政策主题:<span title="{{theme}}">{{theme}}</span></li>\n' +
'<li class="info-item">行业范围:<span title="{{trade}}">{{trade}}</span></li>\n' +
'</ul>\n' +
'</a>\n' +
'<a class="text-list-btn" href="javascript:;"><span>咨询</span></a>\n' +
'</li>';
// 给咨询按钮绑定点击事件
this.onClick = function() {
// 触发抛出事件
var event = new CustomEvent('consult', { detail: '点击了咨询按钮' });
document.dispatchEvent(event);
};
var self = this;
$(document).on('click', '.text-list-btn', function() {
self.onClick();
});
}
```
在上面的代码中,我们给 MyComponent 的构造函数添加了一个 onClick 方法,该方法在点击咨询按钮时会触发抛出一个名为 "consult" 的事件,并带有一个字符串类型的详细信息。然后,我们在构造函数中使用 jQuery 给咨询按钮绑定了一个点击事件,该事件在触发时调用 onClick 方法。
阅读全文