必须单击两次元素才能使Jquery事件起作用
[英]Have to click element twice for Jquery event to work
问题描述
I have an ajax function that I have to click twice to work. 
我有一个ajax函数，必须单击两次才能工作。 I would like it to just work with one click. 我希望它只需单击一下即可工作。 It was working before I added a click event that checks the text of what I'm clicking and uses it as part of the URL. 在添加单击事件以检查我所单击的文本并将其用作URL的一部分之前，它一直在工作。 My problem likely resides there. 我的问题可能在那儿。 I need a fresh perspective on what might be wrong. 对于可能出问题的地方，我需要有新的看法。
Jquery: jQuery的：
function ajaxShow(){
$('#formats a').click(function(e) {
var txt = $(e.target).text();
console.log(txt);
$.ajax({
url : "./enablereports/" + txt + ".html",
data: "html",
contentType:"application/x-javascript; charset:ISO-8859-1",
beforeSend: function(jqXHR) {
jqXHR.overrideMimeType('text/html;charset=iso-8859-1');
},
success : function (data) {
$("#rightDiv").html(data);
}
});
});
}
HTML: HTML：
<body>
<div id="wrapper">
<div id="enablestuff" class="yellowblock">
<h3 id="title" class="header">Enable Formats</h3>
</div>
<div id="formats" class="lightorangeblock">
<a href="" onclick="ajaxShow();event.preventDefault()">ADDSTAMP</a><br>
<a href="" onclick="ajaxShow();event.preventDefault()">SCLGLDNB</a><br>
<a href="" onclick="ajaxShow();event.preventDefault()">SCLGLVNB</a><br>
</div>
</div>
<div id="rightWrap">
<div id="rightDiv">
</div>
</div>
</body>
3 个解决方案
解决方案1
3 2019-03-27 20:22:46
It's cause you're binding the jQuery handler inside of your onclick function - just remove the entire onclick attribute and bind your handler outside the function. 这是因为您要在onclick函数内部绑定jQuery处理程序-只需删除整个onclick属性，然后在函数外部绑定处理程序即可。
$('#formats a').click(function(e) {
e.preventDefault();
var txt = $(e.target).text();
console.log(txt);
$.ajax({
url : "./enablereports/" + txt + ".html",
data: "html",
contentType:"application/x-javascript; charset:ISO-8859-1",
beforeSend: function(jqXHR) {
jqXHR.overrideMimeType('text/html;charset=iso-8859-1');
},
success : function (data) {
$("#rightDiv").html(data);
}
});
});
And the HTML 和HTML
<div id="formats" class="lightorangeblock">
<a href="">ADDSTAMP</a><br>
<a href="">SCLGLDNB</a><br>
<a href="">SCLGLVNB</a><br>
</div>
解决方案2
1 已采纳 2019-03-27 20:25:43
The problem is that each of the anchor elements has an inline event handler that points to ajaxShow , which then sets up the actual event handler for future clicks. 问题在于每个锚元素都有一个内联事件处理程序，该事件处理程序指向ajaxShow ，然后为将来的点击设置实际的事件处理程序。
Instead, eliminate the inline handlers and just set up the actual handler without the ajaxShow wrapper. 取而代之的是，消除内联处理程序，仅设置没有ajaxShow包装器的实际处理程序。
I would also suggest that you don't use <a> elements since you aren't actually navigating anywhere, so the use of the element is semantically incorrect and will cause problems for people who rely on assistive technologies to use the web. 我还建议您不要使用<a>元素，因为您实际上并没有在任何地方导航，因此，该元素的使用在语义上是不正确的，并且会给依赖辅助技术来使用Web的人们带来麻烦。 Instead, since you want line breaks in between each "link", use <div> elements and just style them to look like links. 相反，由于要在每个“链接”之间插入换行符，因此请使用<div>元素，并将其样式设置为看起来像链接。
Lastly, you've used the name attribute on one of your last div elements, but name is only valid on form fields. 最后，您在最后一个div元素之一上使用了name属性，但是name仅在表单字段上有效。 You could give it an id if needed. 如果需要，可以给它一个id 。
$('#formats div').click(function(e) { var txt = $(e.target).text(); console.log(txt); $.ajax({ url : "./enablereports/" + txt + ".html", data: "html", contentType:"application/x-javascript; charset:ISO-8859-1", beforeSend: function(jqXHR) { jqXHR.overrideMimeType('text/html;charset=iso-8859-1'); }, success : function (data) { $("#rightDiv").html(data); } }); });
#formats div { text-decoration:underline; color:blue; cursor:pointer; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="wrapper"> <div id="enablestuff" class="yellowblock"> <h3 id="title" class="header">Enable Formats</h3> </div> <div id="formats" class="lightorangeblock"> <div>ADDSTAMP</div> <div>SCLGLDNB</div> <div>SCLGLVNB</div> </div> </div> <div id="rightWrap"> <div id="rightDiv"></div> </div>
解决方案3
0 2019-03-27 20:39:42
I was able to get this working by adding ajaxShow(); 我可以通过添加ajaxShow（）来使其工作。 into a $(document).ready(function (). 放入$（document）.ready（function（）。
Dirty, but it works. 脏，但是可以用。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.