php - $ajax->link() 在 Firefox 中不起作用？

Question

我正在阅读 Beginning CakePHP，为了让您可以对评论进行投票，它告诉您创建几个 AJAX 链接:

<?=$ajax->link('<li>up</li>',
                      '/comments/vote/up/'.$comment['Comment']['id'],
                      array('update' => 'vote_'.$comment['Comment']['id']),
                      null, false);?>
<?=$ajax->link('<li>down</li>',
                      '/comments/vote/down/'.$comment['Comment']['id'],
                      array('update' => 'vote_'.$comment['Comment']['id']),
                      null, false);?>

这在 IE 中工作正常，但在 FF 中它根本不做任何事情。它甚至不会到达 Controller 或模型，因为它生成的链接不会执行任何操作。

它生成的 HTML 如下所示:

<a id="link2128392960" onclick=" event.returnValue = false; return false;" href="/blog/comments/vote/up/1"/>
<li>
  <a id="link2128392960" onclick=" event.returnValue = false; return false;" href="/blog/comments/vote/up/1">up</a>
</li>
<script type="text/javascript">
  //<![CDATA[
  Event.observe('link2128392960', 'click', function(event) { new Ajax.Updater('vote-1','/blog/comments/vote/up/1', {asynchronous:true, evalScripts:true, requestHeaders:['X-Update', 'vote-1']}) }, false);
  //]]>
</script>

Answer 1

首先，您粘贴的 HTML 输出不准确。看起来你是从 Firebug 或其他东西而不是浏览器实际的“查看源代码”页面复制的。在这种情况下，CakePHP 实际上不会生成自闭合 anchor 标记( <a /> 而不是 <a></a> )，如您的示例所示。

我相信这指出了您的问题。您的浏览器的 HTML 解析器(或 Firebug 的)试图在运行时更正代码这一事实表明您的 HTML 格式不正确。具体来说，您不能将 block 级元素 ( <li> ) 放在行内元素 ( <a> ) 中。

<div class="actions">
    <ul>
        <li>
            <?php echo $ajax->link('up', array(
                'controller' => 'comments',
                'action' => 'vote',
                'up',
                $comment['Comment']['id']
            ), array(
                'update' => 'vote_' . $comment['Comment']['id']
            ), null, false); ?>
        </li>
        <li>
            <?php echo $ajax->link('down', array(
                'controller' => 'comments',
                'action' => 'vote',
                'down',
                $comment['Comment']['id']
            ), array(
                'update' => 'vote_' . $comment['Comment']['id']
            ), null, false); ?>
        </li>
    </ul>
</div>

上面的示例将生成有效的 HTML 作为内联 <a>然后元素将完全嵌套在 block 级 <li> 中元素。这应该有望修复您的页面在符合标准的浏览器中的功能。