如何停止HTML按钮自动重定向到另一个网页

Question

我有一个HTML按钮：

<button>
   <img id = "click-me" src="https:..." alt="Add to List" style="width: 50px"/>
</button>

当点击时，应该执行以下JQuery代码：

$(function () {
    $("#click-me").click(function () {
        document.getElementById('list').style.backgroundColor = "red";      
    });
});

但是，与我想要的不同的是，点击按钮会将我发送到我的网站的另一个页面。我该怎么停止这个？谢谢

编辑：

以下是页面的完整HTML：

<div class="form">
      <h1>Create A Meeting</h1>

      <%= form_for(@newevent) do |f| %>

          <%= f.text_field :name, :placeholder => "Title" %>
          <!--< f.collection_select :location, Location.all, :id, :locName %> FOR WHEN LOCATIONS ARE A THING-->
          <%= f.text_field :description, :placeholder => "Short Description" %>

          <div>
            <h2>Who's involved?</h2>
            <p>select a colleague to compare their calendar with yours</p>
            <%= f.collection_select :id,
                                    Customer.where(business_id: current_customer.business_id),
                                    :id,
                                    :full_name,
                                    { prompt: 'Select' },
                                    { id: "colleage-select", onChange: "renderColCal(this)" } %>
            <button id="click-me" type="button">
              <img  src="https://cdn4.iconfinder.com/data/icons/basic-ui-elements/700/07_plus-128.png" alt="Add to Event" style="width: 50px"/>
            </button>



            <div class = 'row'>
                <div class = 'col-md-6' id = 'left-calendar-wrapper'>
                  <h3>Your calendar:</h3>
                  <%= render partial: '/calendars/show', locals: {} %>
                </div>

                <div class="col-md-6" id="calendar-wrapper">
                  <h3>Your colleague's calendar:</h3>


                </div>
              <div>
                <p>Meeting Participants:</p>
                <ol id ="list">
                  <li>list</li>

                </ol>
              </div>


            </div>


          </div>



          <div>
            <h2>when do you want it to start?</h2>
            <%= f.datetime_select :starts_at, :placeholder => "when do you want it?"   %>
          </div>



          <div>
            <h2>when do you want it to end?</h2>
            <%= f.datetime_select :ends_at, :placeholder => "when should it end?"  %>
          </div>


          <%= f.submit "Create Meeting", class: "btn-submit" %>
      <% end %>


    </div>
  </div>
</div>

JQuery代码保持不变

- S Craig

---

在 click 函数的末尾添加 return false;。 - Mottie

我刚刚尝试了一下，它并没有停止重定向。 - S Craig

@SCraig 两个都试一下... 还有 e.preventDefault()。 - Praveen Kumar Purushothaman

@SCraig 将 id="click-me" 添加到 button 而不是 img。 - Praveen Kumar Purushothaman

如果你只是为了外观而使用<button>，那么你可以尝试使用一个img，给它应用一个myButtonClass类属性，并对其进行样式设置。 （编辑：或者，将type="button"添加到按钮中，以便默认情况下不会提交） - Katana314

Answer 1

将id="click-me"添加到button而不是img。同时，请为button添加type="button"。

要么添加e.preventDefault()，要么添加return false:

$(function () {
    $("#click-me").click(function () {
        document.getElementById('list').style.backgroundColor = "red";
        return false;
    });
});

或者：

$(function () {
    $("#click-me").click(function (e) {
        e.preventDefault();
        document.getElementById('list').style.backgroundColor = "red";
    });
});

- Praveen Kumar Purushothaman

---

你确实可以在button标签内部嵌套一个img标签。请编辑您的回答。 - michael

否则，完美无缺 (: - michael

这并没有解决我的问题。 - S Craig

@SCraig 你添加了jQuery吗？ - Praveen Kumar Purushothaman

我已经接受了它，但你应该更新你的答案，建议在我的按钮标签中添加type="button"，因为这实际上修复了原始问题。 - S Craig

Answer 2

按钮本身不会做任何事情。我猜它是在表单中，当点击时提交表单。所以你应该防止这种情况发生：

$('#click-me').parents('form').on('submit', function(e){
    e.preventDefault();
});

或者只需在按钮上添加type="button"。如果没有提供类型，则将按钮处理为提交按钮（type="submit"）。

<button type="button">
   <img id = "click-me" src="https:..." alt="Add to List" style="width: 50px"/>
</button>

请粘贴更多的HTML/JS代码，因为查看此代码时按钮不应该执行任何操作

- Bogdan Kuštan

---

我将编辑我的问题。按钮位于一个表单中，但我不想提交表单，我只想更新页面的视觉效果。 - S Craig

只需在您的按钮中添加类型 <button type="button"></button>。 - Bogdan Kuštan

Answer 3

使用e.preventDefault()对我很有帮助

以下是如何避免表单提交时按钮的点击

continueBtn.onclick = function(e) {
    if (invalidEmailField.style.display ==
        "block") {
        e.preventDefault();
    }
}

- Anil Kumar K