如何为链接创建onclick

Posted 2023-03-05

【中文标题】如何为链接创建onclick

【英文标题】：how to create onclick for a link

【发布时间】：2013-02-06 17:26:54

【问题描述】：

我有一个div，我在运行时动态设置它的值，如果有比我启用的值或创建一个具有onclick 方法的链接，我将调用javascript 方法。

如何在jquery 或javascript 中执行此操作？

我将值设置为div，如下所示，

document.getElementById('attachmentName').innerhtml=projectInforamtionMap.Cim_AttachmentNames;

这是 div：

<tr>
  <td align="left"><div id="attachmentName"> </div></td>
</tr>

请帮助我找到并修复。

最好的问候

【问题讨论】：

在 javascript 中使用 .setAttribute。

【参考方案1】：

可以设置onclick函数：

document.getElementById('attachmentName').onclick = function() ;

【讨论】：

我只是发出警报，但它不适用于所有给出的答案

你能在 JsFiddle 上做一个示例吗？

你在这里犯了一个错误：document.getElementById('attachmentName")。您使用quote 开始并使用double quote 结束。如果您修复它，您的示例将正常工作。

【参考方案2】：

假设你的函数之前是这样定义的

function foo()alert('function call');

添加innerHTML后

在 JavaScript 中

document.getElementById('attachmentName').setAttribute('onclick','foo()');

在 Jquery 中

$("#attachmentName").attr('onclick','foo()');

【参考方案3】：

你有几个选择

JavaScript：

// var elem = document.getElementById('attachmentName');
elem.onclick = function() ;
elem.setAttribute('onclick','foo()');
elem.addEventListener('onclick', foo, false); // The most appropiate way

jQuery:

// var elem = $('#attachmentName');
elem.click(foo);
elem.on('click', foo);
$('body').on('click', elem, foo);

在 3 个 jQuery 替代方案中，最后一个是最好的。原因是因为您只是在正文元素上附加了一个事件。在这种情况下，这并不重要，但在其他情况下，您可能愿意将相同的事件附加到元素集合，而不仅仅是一个元素。

因此，使用这种方法，事件被附加到正文，但适用于被点击的元素，而不是将相同的事件附加到每个元素，因此更有效:)

【讨论】：

我来这里是为了寻找一种将onclick 添加到a href 的方法。 .onclick = 似乎不适用于 a hrefs？您的第二个选项setAttribute 效果很好。谢谢！

【参考方案4】：

$('#attachmentName').click(function()
     //do your stuff 
)

【参考方案5】：

jquery方式：

$("#attachmentName").click(function() 
  some_js_method();
);

【参考方案6】：

您可以通过以下方式在 div 中插入链接而无需这样做

document.getElementById("attachmentName").onClick = function () 
                                                                  alert(1); // To test the click
                                                                 ;

您也可以通过以下方式借助 jQuery 来实现它。

$("#attachmentName").click(function () 
                                        
                                             alert(1);
                                        );

为此，您必须在页面上包含 jQuery liabray。参考 jQuery.com

如果你强烈希望在 Div 中包含链接，那么下面是它的代码

var link = $("<a>"+ $("#attachmentName").text() +"</a>");
$("#attachmentName").html($(link);
link.click(function () 
                          alert(1);
                        );

希望这会有所帮助。

【参考方案7】：

当我将经典的 asp 详细信息页面转换为单页 ajaxified 页面时，我转换了页面中的现有链接以获取在同一页面的 DIV 中加载的详细信息。我将 href 标记重命名为 dtlLink 并在 jquery load() 函数中获取该数据。

detail.asp（此处添加了server.urlencode，需要）

<a href=""#"" onclick=""javascript:LoadDetails(this)"" dtllink="detail.asp?x=" & Server.URLEncode(Request("x"))&y=" & Server.URLEncode(Request("y")) > link text </a>

parent.asp（它有一些额外的代码用于 holdon.js 微调器图像、按钮启用/禁用、结果 div 显示/隐藏） jQuery

 function LoadDetails(href) 
 //get the hyperlink element's attribute and load it to the results div.
            var a_href = $(href).attr('dtllink');
            console.log(a_href);
            $('#divResults').html('');



            DisplayHoldOn();
            $('#divResults').load(a_href, function (response, status, xhr) 
                $('#divCriteria').hide();

                HoldOn.close();
                if (status == "error") 
                    var msg = "There was an error: ";
                    $("#divResults").html(msg + xhr.status + " " + xhr.statusText);
                    $('#divCriteria').show();
                    $("#cmdSubmit").removeAttr('disabled');
                
            );