【问题标题】:how to create onclick for a link如何为链接创建onclick
【发布时间】:2013-02-06 17:26:54
【问题描述】:

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

如何在jqueryjavascript 中执行此操作?

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

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

这是 div:

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

请帮助我找到并修复。

最好的问候

【问题讨论】:

  • 在 javascript 中使用 .setAttribute。

标签: javascript jquery onclick href


【解决方案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');
                          }
                      });
                  }
          

          【讨论】:

            猜你喜欢
            • 2015-08-26
            • 1970-01-01
            • 2021-05-26
            • 2016-02-17
            • 2021-12-23
            • 1970-01-01
            • 2021-02-15
            • 1970-01-01
            • 1970-01-01
            相关资源
            最近更新 更多