锚点标签没有触发点击事件

Question

这里是演示
HTML代码为

<div id="me"></div>

<a id="ok" href="">OK</a>

jQuery代码：

var tr = '';
for (var i = 0; i < 100; i++) {
    tr += '<tr><td>a' + i + '</td></tr>';
}
var table = '<table>';
table += tr;
table += '</table>';
$('#me').append(table);

$('td').each(function(index, value) {
    if ($(this).text() == 'a50') {
        $(this).addClass('yellow').attr('id', 'search');
    }
});    
$('#ok').attr('href','#search');
$('#ok').trigger('click');

待办事项: 每个中都有数据的表格。我正在尝试搜索数据，如果找到搜索的数据，则将添加属性class为yellow和id为search。我有一个锚点标记。单击锚点标记以模拟：当单击时，窗口将滚动到该位置。我还为锚点标记添加了内部链接。

现在，单击锚点标记，使页面导航到href位置

问题: 页面未导航到内部链接。锚点标记触发单击时是否存在问题？但是，当我使用鼠标单击锚点标记时，它可以导航。

- mesimplybj

---

为什么不直接使用window.location.href="#search"呢？ - Anonymous

Answer 1

将最后一行替换为

window.location.href='#search​​';

对我来说可以工作 :)

- Anonymous

Answer 2

点击和导航之间有区别...所以当在锚标签中使用href时，更像是导航。尝试这个fiddle

var tr = '';
for (var i = 0; i < 100; i++) {
    tr += '<tr><td>a' + i + '</td></tr>';
}
var table = '<table>';
table += tr;
table += '</table>';
$('#me').append(table);

$('td').each(function(index, value) {
    if ($(this).text() == 'a35') {
        $(this).addClass('yellow').attr('id', 'search');
    }
});

location.href='#search';

- Paras

Answer 3

我认为你应该使用window.location.href。请尝试以下代码：

// define this click event for #ok

$('#ok').on('click', function() {
    window.location.href = this.href
});

$('td').each(function(index, value) {
    if ($(this).text() == 'a50') {
        $(this).addClass('yellow').attr('id', 'search');
    }
});
$('#ok').attr('href', '#search');
$('#ok').click(); // trigger the click

演示

- thecodeparadox