InstantClick没有绑定到动态href

Question

我目前正在使用http://instantclick.io,但该插件并未绑定我动态创建的链接.

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读入响应,上面的响应将执行alert()内部的功能dm.commander

alert: function(message)
{
    $("#messages").empty();
    $("#messages").prepend('<div class="alert alert-'+message['type']+'">'+message['content']+'</div>');
//        this.scrollTo('messages');

},

正如您所看到的,PHP响应会发送一个带有链接的警报.然后表单处理它并返回alert(),它将div添加到#messages

而绑定的jQuery是

$(document).one('click', 'a', function(e) {
        console.log('clicked');
        e.preventDefault();
    })
    InstantClick.init(100);

以上工作与页面上已有的普通链接有关,但它不适用于PHP生成的链接和jQuery prepends.

虽然我不能专门委托#messages将来由于其他功能可以附加说#content.

无论如何都要将instantclick绑定到动态创建的链接,如上所述.

是的,我已经研究过,找不到有效的答案.

Answer 1

您仅在页面加载时初始化 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);