0

我有一个带有表单的页面来发表评论。该网站需要有头像才能发布。我想快速完成这个过程，所以如果用户没有头像，我只需添加一个带有类的链接，启动一个模式，成功后用按钮替换该链接以发表评论。

问题是，当使用下面的代码从链接触发模式时，模型表单会尝试在评论表单而不是照片表单（在模式内部）上发布，即使它们在语义上是分开的（参见下面的 html 代码） .

$(document).ready(function() {
  return $('.idea-new-upload-btn').on("click", function() {
    return $('#uploadAvatarModal').modal();
  });
});

看起来由于某种原因在 click 函数中调用模态时，它正在以某种方式考虑评论表单的范围。知道为什么会发生这种情况以及如何预防吗？

我的 HTML 代码如下所示

<body>
  <container>
    <form method="post" action="/comments">
      <textarea name="comment"></textarea>
      <a href="#" class="idea-new-upload-btn">Link</a>
    </form>
  </container>
  <div id="#uploadAvatarModal">
    modal to upload content using dropzone.js
  </div>
</body>
4

1 回答 1

1

你有没有尝试过：

$('.idea-new-upload-btn').on("click", function(e) {
    e.preventDefault();
    $('#uploadAvatarModal').modal();
  });

如果这不起作用，请查看这篇文章event-preventdefault-vs-return-false它继续进一步解释事件传播，以及使用return false,e.preventDefault和/或冒泡的事件e.stopPropagation

于 2013-08-04T00:04:42.533 回答