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读取响应，上面的响应将在dm.commander中执行alert()函数。

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添加的链接。

尽管我不能明确委派给#messages，因为未来的其他功能可能会附加到#content。

有没有办法将instantclick绑定到像上面那样动态创建的链接。

是的，我已经进行了研究，但找不到可行的答案。

- Ian

---

你在这些函数之后调用了instantclick吗？ - NathanG

Instantclick是最后一个被初始化的东西，我也尝试在表单处理之后重新初始化，但无济于事。 - Ian

奇怪，这是我现在能想到的唯一事情。 - NathanG

$(document).one('click', 'a', function(e) { 这应该改成 .on()，对吧？ - Thoronwen

@Thoronwen 不用了，一个就好。 - Ian

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);

- Niklas

---

点击事件现在已经在控制台日志中显示，但是之后什么也没有发生。 - Ian

既然你正在使用 e.preventDefault();，而我自己没有使用过InstantClick，我假设InstantClick应该在单击时触发预加载的链接？ - Niklas

Answer 2

实际上，对于动态创建的DOM元素，您需要使用on而不是one。

$(document).off("click",'a').on('click', 'a', function(e) {
    console.log('clicked');
    e.preventDefault();
});

谢谢

- Devendra Soni