javascript - 使用Javascript函数将td的onclick设置为null

Question

我有一排用于导航网站的按钮。用户输入填充站点某些页面的信息。在输入信息之前，我想禁用单击导航按钮的功能。 session 变量 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>

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

Answer 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)");

            }
        });
  });