javascript - 锚链接功能 - onclick 和 href

Question

我有带有 onclick 和 href 功能的锚链接。像下面的代码

$("div.actions").append('<a id="excelExport" onClick="callajax();" class="actionButton" alt="Export to Excel" title="Export to Excel" href="partexport" ></a>')

function callajax() {
     jQuery.ajax({
     url : '<s:url action="partexport"/>',
     data : "fters.productNbr" : $("#productsTextArea1").val()} });

     }

单击锚链接时，Callajax 根本没有调用。

Answer 1

处理程序将click首先触发。根据如何处理您的点击，您可以控制 href 链接操作是否通过。

您可以同时执行这两项操作 - 即让您的点击处理程序和链接操作通过。您需要做的就是不要return false或event.preventDefault()从您的点击处理程序中调用。

Answer 2

这里有几件事在起作用。

1. 如果您已经在使用 jquery，最好使用 jquery 来附加处理程序。鉴于这是一个注入链接，它很棘手，但我的示例涵盖了如何做到这一点。
2. 您的分号在 onClick 处理程序的引号之外
3. 为了避免锚标记的默认行为，所有 e.preventDefault()。在您的情况下，这并没有什么大不了的，因为您没有重定向到实际位置，但是如果您没有明确地说“不要执行默认行为”，您可能会看到奇怪的行为

http://jsfiddle.net/g30rg3/u5k95/3/

$(document).ready(function(){
    $("div.actions").append('<a id="excelExport" class="actionButton" alt="Export to Excel" title="Export to Excel" href="http://www.stackoverflow.com">click me</a>');
    $('div.actions').on('click.mylink', '#excelExport',function(e){
        e.preventDefault();
        callajax();
    });

});

function callajax() {
    alert('clicked');

}

Answer 3

click 事件将首先执行，然后根据结果执行 href。例如，false从单击事件返回将阻止执行 href。