超链接无法使用淘汰赛。给出错误：语法错误，无法识别的表达式

Posted 2023-05-08

【中文标题】超链接无法使用淘汰赛。给出错误：语法错误，无法识别的表达式

【英文标题】：Hyperlink not working using knockout. Gives error: Syntax error, unrecognized expression

【发布时间】：2017-06-19 08:02:13

【问题描述】：

要创建超链接，我使用以下代码。

<a data-toggle="tab" data-bind="attr:  href: '../Company/Index/' + IndexID , text: XYZ"></a>

代码的主要目的是从当前关卡向后移动一个关卡。

生成的html如下。

<a data-toggle="tab" data-bind="attr:  href: '../Company/Index/' + IndexID , text: DateTimeStamp" href="../Company/Index/0">XYZ</a>

当我们尝试点击超链接时，我们会收到错误消息

Uncaught Error: Syntax error, unrecognized expression: ../Company/Index/0
    at Function.Sizzle.error (jquery-1.9.0.js:4411)
    at tokenize (jquery-1.9.0.js:5057)
    at select (jquery-1.9.0.js:5439)
    at Function.Sizzle [as find] (jquery-1.9.0.js:3984)
    at init.find (jquery-1.9.0.js:5553)
    at init (jquery-1.9.0.js:179)
    at jQuery (jquery-1.9.0.js:53)
    at b.show (bootstrap.min.js:9)
    at HTMLAnchorElement.<anonymous> (bootstrap.min.js:9)
    at Function.each (jquery-1.9.0.js:631)
Sizzle.error @ jquery-1.9.0.js:4411
tokenize @ jquery-1.9.0.js:5057
select @ jquery-1.9.0.js:5439
Sizzle @ jquery-1.9.0.js:3984
find @ jquery-1.9.0.js:5553
init @ jquery-1.9.0.js:179
jQuery @ jquery-1.9.0.js:53
b.show @ bootstrap.min.js:9
(anonymous) @ bootstrap.min.js:9
each @ jquery-1.9.0.js:631
each @ jquery-1.9.0.js:253
a.fn.tab @ bootstrap.min.js:9
(anonymous) @ bootstrap.min.js:9
dispatch @ jquery-1.9.0.js:3045
elemData.handle @ jquery-1.9.0.js:2721

但是，当我们右键单击并在新标签页中打开它时，它可以完美运行。

任何有用的指针将不胜感激。

【问题讨论】：

你这样做的目的是什么？进行整页请求或显示引导选项卡？因为正如我所见，问题在于您正在混合 url（这就是在新选项卡中打开有效的原因）和引导选项卡插件（需要一个有效的选择器来决定显示哪个选项卡）；此功能会拦截a 的默认行为，因此不会发生请求，但只要涉及引导程序，href 中的值就不是有效的选择器。因此，答案取决于您是想通过 http 请求实际导航，还是按应有的方式使用引导选项卡。

【参考方案1】：

您遇到此问题是因为您在代码中定义了两个冲突行为。 data-toggle="tab" 属性使 Bootstrap 的 Tab 插件将其视为选项卡触发器，即，无论何时单击该项目，都应使关联的选项卡内容可见。另一方面，href 属性仅在您的情况下提供常规 url。

现在想想：

Bootstrap 的选项卡需要一个有效的 href 属性中的 jQuery 选择器来确定它应该使哪个 HTML 片段可见， 但是有一个 url 而不是选择器。

所以：

右键单击元素并选择在新选项卡中打开有效，因为在这种情况下，导航不会被拦截，浏览器只是打开一个新选项卡并使其导航到选定的 url，而 Bootstrap 不是在这里玩。 仅仅单击它并停留在同一个选项卡中是行不通的，因为在这种情况下，导航被Bootstrap拦截，它提取href属性的值并尝试将其用作jQuery选择器使引用的元素可见。很明显，因为是url而不是选择器，所以会失败。

所以答案真的取决于你真正想要完成的事情。

您是否希望导航发生，而data-toggle="tab" 只是意外剩余？好吧，只要去掉这个属性就行了。 或者您想使用 Bootstrap 的选项卡功能吗？然后提供一个有效的选择器而不是一个 url。

我的猜测是第二个选项是您的目标，如果我没记错的话，href 存在是因为您想将其用作 Ajax 请求的 url，并按需加载选项卡的内容。如果这是正确的，href 属性对您没有帮助，您应该将 click 事件绑定到执行初始化的视图模型的方法（即使用来自服务器的数据填充自身）。然后你可以传递 ajax 请求的 url 来按照here, the code block just above 'Note 3' 的描述进行。

【讨论】：

哦。我的错。现在工作正常。谢谢你的解释。