使用Javascript函数将td的onclick设置为null答案

【问题标题】：Setting onclick of td to null using Javascript function使用Javascript函数将td的onclick设置为null
【发布时间】：2014-10-01 01:27:09
【问题描述】：

我有一排用于浏览网站的按钮。用户输入填充站点某些页面的信息。在输入信息之前，我想禁用单击导航按钮的功能。会话变量Session["indexloaded"] 和Session["build"] 表示用户是否输入了所需的信息。我目前正在使用这个脚本：

$(document).ready(function () {
      document.getElementById("buttontable").onclick = function (){
              if ('<%=Session["indexloaded"]%>' === "") {
              $("td").attr("onclick", null);
              alert("(Alert user that the buttons are disabled until they do a certain action)");
              return;
          }else if ('<%=Session["build"]%>' === "") {
              $("td").attr("onclick", null);
              alert("(Alert user that the buttons are disabled until they do a certain action)");
              return;
          }
      }
 });

我想禁用以下 onclick 功能。 HTML：

<table id="buttontable">
    <tr>
        <td class="buttonstyle" onclick="location.href='page1.aspx';" style='text-align: center; width:x%;'>Button 1</td>
        <td class="buttonstyle" onclick="location.href='page2.aspx';" style='text-align: center; width:x%;'>Button 2</td>
        <td class="buttonstyle" onclick="location.href='page3.aspx';" style="text-align: center; width:x%;">Button 3</td>
        <td class="buttonstyle" onclick="location.href='page4.aspx';" style="text-align: center; width:x%;">Button 4</td>
        <td class="buttonstyle" onclick="location.href='page5.aspx';" style="text-align: center; width:x%;">Button 5</td>
        <td class="buttonstyle" onclick="location.href='page6.aspx';" style="text-align: center; width:x%;">Button 6</td>
    </tr>
</table>

现在，如果在会话 === "" 时单击其中一个按钮 (tds)，则会显示警报，但我仍将被重定向到该按钮 (td) 的 onclick 函数中标识的目标.如何防止重定向？这可以仅使用 Javascript 或 jQuery 来完成吗？

【问题讨论】：

$( "td").unbind( "click" );
@GokhanArik 进行了更改，但我仍然遇到与上述相同的问题。警报将显示，但在警报关闭后仍会重定向。
@GokhanArik 我也试过了。选定的答案最终对我有用。感谢您的建议

标签： javascript jquery html session onclick

【解决方案1】：

您可以通过这种方式使用 html5 数据属性来完成此操作：

HTML：

<td class="buttonstyle" data-url="page1.aspx" style='text-align: center; width:x%;'>Button 1</td>
<td class="buttonstyle" data-url="page2.aspx" style='text-align: center; width:x%;'>Button 2</td>
       --------------------------------------
       ---------------------------------------
       ---------------------------------------

JQUERY：

$(document).ready(function () {

    $(".buttonstyle").click(function(){

     if ('<%=Session["indexloaded"]%>' === "") {
         alert("(Alert user that the buttons are disabled until they do a certain action)");

     }
else {
window.location.href = $(this).data("url");
}
else if ('<%=Session["build"]%>' === "") {

     alert("(Alert user that the buttons are disabled until they do a certain action)");

            }
        });
  });

【讨论】：

这正是我所需要的。太感谢了！一件事-我交换了else和else if。所以我以if (session...etc){、else if (session...etc){、else{ window...etc结束了

【解决方案2】：

您的原始代码有一些小问题，在这里更正，以防您想在不使用 HTML5 的情况下使您的原始概念工作。

    var areButtonsDisabled = false;
    $(document).ready(function () {
        document.getElementById("buttontable").onclick = function ()
        {
            if(areButtonsDisabled)
            {
                alert("(Alert user that the buttons are disabled until they do a certain action)");
            }
    }

        if ('<%=Session["indexloaded"]%>' === "") {
            $("td").attr("onclick", null);
            areButtonsDisabled = true;
            return;
        }
        else if ('<%=Session["build"]%>' === "") {
            areButtonsDisabled = true;
            $("td").attr("onclick", null);
            return;
        }
    });

【讨论】：

【解决方案3】：

我认为你应该能够做这样的事情：

$(document).ready(function () {
        document.getElementById("buttontable").onclick = function (e)
        {
            e.preventDefault();
            if ('<%=Session["indexloaded"]%>' === "") {
                $("td").attr("onclick", null);
                alert("(Alert user that the buttons are disabled until they do a certain action)");
                return;
            }
            else if ('<%=Session["build"]%>' === "") {
                $("td").attr("onclick", null);
                alert("(Alert user that the buttons are disabled until they do a certain action)");
                return;
            }
        }
    });

【讨论】：

【解决方案4】：

您应该考虑使用正确的 HTML 元素，例如链接的 <a> 元素：

<table id="buttontable">
    <tr>
        <td style='text-align: center; width:x%;'><a class="buttonstyle" href="page1.aspx">Button 1</a></td>
        <td style='text-align: center; width:x%;'><a class="buttonstyle" href="page2.aspx">Button 2</a></td>
        <td style='text-align: center; width:x%;'><a class="buttonstyle" href="page3.aspx">Button 3</a></td>
        <td style='text-align: center; width:x%;'><a class="buttonstyle" href="page4.aspx">Button 4</a></td>
        <td style='text-align: center; width:x%;'><a class="buttonstyle" href="page5.aspx">Button 5</a></td>
        <td style='text-align: center; width:x%;'><a class="buttonstyle" href="page6.aspx">Button 6</a></td>
    </tr>
</table>

然后你的脚本就变得简单多了：

$(document).ready(function () {
    $("#buttontable").on('click', '.buttonstyle', function(e) {
        if ('<%=Session["indexloaded"]%>' === "" || '<%=Session["build"]%>' === "") {
            alert("(Alert user that the buttons are disabled until they do a certain action)");
            e.preventDefault();
        }
    });
});

这将添加事件处理程序来处理所有<a> 元素的单击事件，如果条件成立，则停止跟踪链接（e.preventDefault() 停止导航）。否则，链接会像通常的链接一样被关注。

【讨论】：