如何为页面上的所有按钮创建 JQuery 点击事件?



我正在制作一个网站设置页面(我猜(,网站的用户可以在其中编辑在网站的公共页面上看到的页面值。(这仅限于登录用户(

我有一个表单(如下所示(,单击该表单时,将执行 AJAX 并"发布"更新内容页面。

我想我在这里的问题是如何更改下面的代码,以便它根据按下的按钮更改要从中获取的文本正文。

更简单的是,如何创建适用于所有按钮的页面范围单击事件,我可以判断按下了哪个按钮?

我知道下面只有 1 个文本字段和 1 个按钮,但将来还会有更多,因此我需要此功能。

我的e.js文件:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/admin.css">
<title>Manage the website</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#submitButton").click(function(){
$.ajax({
url: 'update',
type: 'POST',
data: {
toUpdate: 'homepage',
text: document.getElementById('textField').value // Select a text field based on the button
},
});
});
});
</script>
</head>

<header>
<!-- Put partial includes here -->
</header>
<div class="topPage">

<h1>Hello, <%= firstName %>!</h1>
<p1>
Find a value you would like to edit, then press send. The website can take up to 10 mins for the changes to apply. The changes will not change live.
</p1>
</div>
<div class="homepage">
<div class="information">
<h1>
Homepage variables
</h1>
<p1>
Variables for the 'homepage' page are displayed below. Changes can take up to 10 mins to apply globally.
</p1>
<hr>
</div>
<div class="form">
<label>
Change the 'body' of 'homepage'
</label>
<form action="nothing" method="post">
<input type="text" id="textField" name="text" value="<%= pageData.get('homepage').homeBody%>" required>
<button type="button" class="submit" id="submitButton">Submit Changes</button>
</form>

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

</html>

提前感谢!

你可以这样做:

$("button").on("click", function() {
console.log($(this).attr("id"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="this">
This
</button>
<button id="that">
That
</button>

选择表单中的输入标签并跟踪更改事件:

$("form :input").on("change", function(){ 
var $elm = $(this); // the button which is clicked
// do your ajax here
});

最新更新