Question

我有一个锚标记的问题我用附加jQuery填充我的html表，在td里面有一个锚标记当我点击它而不是调用它的功能它刷新页面：

＆＃13;

$('.show-directions').click(function( event ) {
  event.preventDefault();
  $('.ui.modal').modal('show');
  setTimeout(function() {
    initMap();
  }, 500); 
});

function initMap(){
  console.log("initMap has been called.");
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<a class="show-directions" href="">Detail</a>

＆＃13;

Answer 1

正如您所看到的（在我对您的问题进行编辑之后），假设您已正确引用了Bootstrap库，您的代码正常工作。因此，您的问题必须与页面上的其他内容相同。

您已表明您正在使用a动态添加.append()元素。在这种情况下，在将元素添加到文档之前，正在注册click事件处理程序。要确保处理它，请使用 "event delegation" ，这是在文档中的更高级别元素（在事件注册时存在）设置事件处理程序的过程然后，当事件稍后由较低级别的元素启动时，事件冒泡会使其到达较高元素。然后检查以查看启动事件的元素。

说完所有这些后，首先不应该使用a。 <a>元素用于导航，而不是用于挂钩到JavaScript。使用超链接进行非导航任务在语义上是不正确的。对于使用辅助技术（如屏幕阅读器）浏览网页的用户而言，这将导致问题，并且（正如您已经知道的，鉴于您的代码）要求您通过添加event.preventDefault()来禁用浏览器本身的导航愿望。< / p>

而是使用其他元素来触发您的函数，例如span元素：

// Intercept the event at the document level, but check to see if
// it originated with an element that has the .show-direcions class
$(document, '.show-directions').click(function( event ) {
  $('.ui.modal').modal('show');
  setTimeout(function() {
    initMap();
  }, 500);
});

function initMap(){
  console.log("initMap has been called.");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<span class="show-directions">Detail</span>

Answer 2

将您的代码更改为以下内容：

$(document).on('click', '.show-directions', function(){ 
   //YourCode
});

它应该有用。

有关问题的解释，请阅读@Optimus Prime答案：Why doesn't click work on appended elements?

Answer 3

我做了别的事

<a class="show-directions" href="javascript:tacos();" >

我称之为功能玉米饼，它做同样的事情

function tacos () {
        $('.ui.modal').modal('show');
        setTimeout(function() {

            initMap();
        }, 2000);
    }

Answer 4

在脚本$(function(){$("#AnchorTagID").click(function(){return false;});});中添加此内容或使用<button type='button'>Add Anchor Attributes here<button/>

或者你可以添加href="#"而不是空的href，或者从那里完全删除它。

锚标记刷新页面

4 个答案: