HTML图像“onclick”在调用javascript函数时重定向到另一个页面(不需要）

HTML image 'onclick' redirects to another page when calling javascript function (unwanted)

本文关键字：另一个 重定向 不需要 函数 onclick 图像 javascript 调用 HTML      更新时间：2023-09-26

我有一个 HTML 图像，我想点击它，它会触发一个要调用的 javascript 函数，它会根据 ruby 生成的collection_select对页面进行一些更改。但是每当我尝试调用该函数时，它都会重定向到另一个页面(pages'main.html.erb)，这不是我想要的。

HTML 图像（和相关代码）：

<%= f.collection_select :id,
    Customer.where(business_id: current_customer.business_id),
    :id,
    :full_name,
     { prompt: 'Select' },
     { id: "colleage-select", onChange: "renderColCal(this)" } %>
<input type="image" src="http://..." onclick="addParticipant()">
 ....
<p>Meeting Participants:</p>
 <ol id ="list">
 </ol>

JavaScript：

//application.js
var List = document.getElementById('list'); //found in events'new.html.erb
function addParticipant(){
    var name = document.getElementById('colleague-select').textContent; //gets :full_name of selected Customer
    var entry = document.createElement('li'); //creates new list element within ordered list 'list'
    entry.appendChild(document.createTextNode(name)); //adds :full_name to list element
    List.appendChild(entry); //adds list element to ordered list
}

我已经将 'addParticipant()' 中的代码替换为alert('hello')并且无需重定向即可正常工作，那么我的 javascript 代码中是什么导致了问题？任何帮助将不胜感激，谢谢。

警报对话框弹出窗口会停止默认的点击行为，但您的代码不会。

您需要明确执行此操作：

function addParticipant(e) {
  ...
  e.preventDefault();
}
相关文章：