Question

我点击以下javascript代码，点击下面的超链接即可正常使用。

<a href="delete_event.php?event_id=110" onClick="return ConfirmDelete()" class="list-group-item">Delete Event</a>
<script>
function ConfirmDelete() {
  var ans=confirm("Are you sure to delete this event?");
  if(!ans) {
      return false;
  }
}
</script>

现在我有一个按钮的HTML代码，当用户点击下面的按钮时，我想执行与上面相同的功能。

<button type="button" class="btn btn-info" data-toggle="popover">Delete Event</button>

那么请告诉我需要对我为超链接编写的代码做出哪些更改？

感谢。

Answer 1

只需添加一个onclick属性，与锚点相同，不需要return

<button type="button" class="btn btn-info" data-toggle="popover" onClick="ConfirmDelete('delete_event.php?event_id=110')">Delete Event</button>

function ConfirmDelete(url) {
  var ans=confirm("Are you sure to delete this event?");
  if(!ans) {
      return false;
  }
  window.location.href = url; 
}

因为您还添加了 jQuery 标记

<button type="button" class="btn btn-info" data-toggle="popover" data-url="delete_event.php?event_id=110">Delete Event</button>

<script>
   $( "button.btn-info" ).bind( "click", function(){
     ConfirmDelete($( this ).attr( "data-url" )) ;
   } )
   function ConfirmDelete(url) {
      var ans=confirm("Are you sure to delete this event?");
      if(!ans) {
         return false;
      }
      window.location.href = url; 
   }
</script>

Answer 2

为按钮和超链接提供id

<button type="button" class="btn btn-info" id="btn" data-toggle="popover">Delete Event</button>

$('#btn').click(function(){
   $('#hyperlickid').click();
   window.locaction.reload(true)
})

Answer 3

    $(document).ready(function(){
        $("a").click(function() {
            if (ConfirmButtonDelete("delete_event.php?event_id=110") == false) {
              $(this).attr("href", "#");
            } else {
              $(this).attr("href", "delete_event.php?event_id=110");
            }
        });
        $("button").click(function() {
            if (ConfirmButtonDelete("delete_event.php?event_id=110") == false) {
              //do nothing
            } else {
              window.location = "delete_event.php?event_id=110";
            }
        });
    });

    function ConfirmButtonDelete(url) {
        var ans=confirm("Are you sure to delete this event?");
        if(!ans) {
            return false
        } else {
            return true
        }
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<button type="button" class="btn btn-info" data-toggle="popover">Delete Event</button>
<a href="delete_event.php?event_id=110" class="list-group-item">Delete Event</a>

Answer 4

试试这个。

<button type="button" class="btn btn-info" data-toggle="popover" onClick="ConfirmDelete()">Delete Event</button>

<script>
function ConfirmDelete() {
  var ans=confirm("Are you sure to delete this event?");
  if(!ans) {
      return false;
  }else{
    window.location.href = "http://stackoverflow.com";
  }
}
</script>

如何在超链接上制作相同的工作javascript代码，单击按钮可以使用？

4 个答案: