javascript - 防止链接在模式窗口中加载单击的链接

标签 javascript jquery html ajax twitter-bootstrap

我有一个链接列表,单击这些链接会打开一个包含一些信息的模式窗口。我正在使用 e.preventDefault(); 来阻止浏览器的默认操作,然后添加我自己的自定义代码以在模态中加载我自己的数据。内容加载得很好,但几秒钟后,我点击其链接的整个网站就会加载到模态中。

  1. 它只发生在特定网站的链接上。
  2. 来自该网站的链接应该是我点击的第一个链接。单击其他链接首先解决此问题。

这是我的代码:

$('a.modal-link').on('click', openModal);

function openModal(evt) {
  evt.preventDefault();
  var link = $(this).attr("href");
  var text = $(this).text();
  safeModal(link, text);
};

function safeModal(linkUrl, linkText) {
  var link = linkUrl;
  var page = window.location.href.split('?')[0];
  var text = linkText;
  var ajaxURL = "http://example.com/script.php";

  $.ajax({
    type: "POST"
    , url: ajaxURL
    , data: {
        link: link
        , page: page
    }
    , success: function (markup) {
        $(".feed-modal .modal-body").html(markup);
    }
  })
};

我也可以提供实际网站的链接,所以你可以自己看看问题(我可能没有解释清楚)。

更新:我正在添加 the link .尝试单击第一个标题,您将看到问题所在。之后,重新加载网页,然后单击第六个链接。现在,关闭模式并再次单击第一个链接。这次一切都应该完美运行。

更新:语法错误不存在。我错误地把它放在了问题中。 :)

最佳答案

此代码有语法错误(删除}):

success: function (markup) {
  $(".feed-modal .modal-body").html(markup);
  }) //delete this
}

整个函数应该是:

function safeModal(linkUrl, linkText) {
  var link = linkUrl;
  var page = window.location.href.split('?')[0];
  var text = linkText;
  var ajaxURL = "http://example.com/script.php";

  $.ajax({
    type: "POST"
    , url: ajaxURL
    , data: {
        link: link
        , page: page
    }
    , success: function (markup) {
        $(".feed-modal .modal-body").html(markup);
        //}) without this
    }
  })
};

工作 DEMO

关于javascript - 防止链接在模式窗口中加载单击的链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41653951/

相关文章:

php - 从街道方向获取准确坐标的最佳方法

Javascript 根据正则表达式测试值,如果需要则稍后测试值

html - HTML 中 "unsafe"个字符的完整列表?

javascript - 使用 Javascript 根据 mysql 中的行数自动更改 span 的内容

javascript - 如何在文本输入中插入删除图标并实现删除文本

php - 为什么这个 jQuery 幻灯片不能正常工作?

javascript - 如何在 Firefox 插件中使用 jQuery?

javascript - jQuery 漂亮照片 : How to pass additional GET parameters?

javascript - 如何将其余宽度设置为元素?

Java JTextPane + HTML