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保持不变

Answer 1

将public async Task Print(Guid orderId) { ... }添加到id="click-me"而非button。另外，请为img添加type="button"。

添加button或e.preventDefault()：

return false

或者：

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

Answer 2

按钮本身不会做任何事情。我猜它是在形式，点击时它提交表格。所以你应该阻止：

add

或者只需将$('#click-me').parents('form').on('submit', function(e){ e.preventDefault(); });添加到按钮即可。如果未提供任何类型，则按钮将作为提交按钮（type="button"）处理。

type="submit"

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

Answer 3

使用 e.preventDefault() 对我有用

这里是如何避免从 FORM SUBMIT 中点击按钮

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

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

3 个答案: