我目前正在使用 http://instantclick.io ,但是插件没有绑定(bind)我动态创建的链接。
PHP 响应
$json['alert'] = array(
'type' => 'success',
'content' => 'Success! Your new thread has been posted, you can visit it <a href="' . site_url_in . 'forums/thread/' . $id . '">here</a>'
);
jQuery 表单处理器
$.post(url, form, function(data){
//Lets do awesomeness
console.log('Data: ' + data);
console.log('Form: ' + form);
dm.commander.init(data);
});
Commander.init 读取响应,上面的响应将执行 dm.commander
中的 alert()
函数
alert: function(message)
{
$("#messages").empty();
$("#messages").prepend('<div class="alert alert-'+message['type']+'">'+message['content']+'</div>');
// this.scrollTo('messages');
},
如您所见,PHP 响应发出了一个带有链接的警报。然后表单对其进行处理并返回 alert() ,它在#messages 前面加上一个 div
而绑定(bind)的 jQuery 是
$(document).one('click', 'a', function(e) {
console.log('clicked');
e.preventDefault();
})
InstantClick.init(100);
以上内容适用于页面上已有的普通链接,但不适用于 PHP 生成的链接和 jQuery 前置。
虽然我不能专门委托(delegate)给 #messages
因为将来其他功能可能会附加到 say #content
。
有没有办法将 instantclick 绑定(bind)到动态创建的链接,如上所示。
是的,我已经研究过但找不到有效的答案。
最佳答案
您只是在页面加载时初始化 InstantClick。然后它将自身应用于 DOM 树中当前的所有链接。然后,当您向 DOM 树添加新链接时,这些链接不会自动添加到 InstantClick。尝试在 AJAX 警报功能结束时初始化 InstantClick。
阅读 NoGray 的回答后,我认为您确实想从 .one 更改为 .on。此外,这也需要重新启动:
alert: function(message)
{
$("#messages").empty();
$("#messages").prepend('<div class="alert alert-'+message['type']+'">'+message['content']+'</div>');
// this.scrollTo('messages');
$(document).unbind('click').on('click', 'a', function(e) {
console.log('clicked');
e.preventDefault();
});
InstantClick.init(100);
},
我得承认这感觉有点脏。只是再次初始化它,但我找不到任何关于某种销毁或重新初始化函数的文档。所以这是我最好的猜测。
原底部代码修复:
$(document).on('click', 'a', function(e) {
console.log('clicked');
e.preventDefault();
});
InstantClick.init(100);
关于javascript - InstantClick 未绑定(bind)到动态 href,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24937876/